【jQuery】IDを使用して値を取得する

最近仕事でjQueryを使うことが多くなったので、記事にしていきたいと思います。

IDを使って値を取得する方法です。

テキストボックスの値を取得する

まずはテキストボックスの値を取得する方法です。

HTMLは仮に次のようにします。

<input type="text" id="textbox01" value="hogehoge" />

jQuery、JavaScriptそれぞれ次のように取得します。

jQuery

var textbox01 = $('#textbox01').val(); //hogehoge

JS

var textbox01 = document.getElementById('textbox01').value; //hogehoge

ラジオボタンの値を取得する

次はラジオボタン。

HTMLは仮に次のようにします。

<input type="radio" id="radio01" value="hogehoge" />
<input type="radio" id="radio02" value="hoge" />

「チェックが付いているほうの値を取得」なら、name属性を使えばチェックが付いたほうを判別しやすいです。

今回はIDを使って値を取得ということで、チェックなど関係なく。

jQuery

var textbox01 = $('#radio01').val(); //hogehoge

JS

var textbox01 = document.getElementById('radio01').value; //hogehoge

ドロップダウンリストの値を取得する

次のようなドロップダウンリストを用意しました。

HTML

<select id="select01">
    <option value="1">値１</option>
    <option value="2">値２</option>
    <option value="3" selected>値３</option>
    <option value="4">値４</option>
</select>

選択肢は複数ありますが、jQueryでもJavaScriptでも、選択されているところの値が取得されます。

jQuery

var select01 = $('#select01').val(); //3

JS

var select01 = document.getElementById('select01').value; //3

まとめ：IDを使って値取得

jQueryなら、IDを指定して、.val()で値取得です。

JavaScriptなら、document.getElementByIdでIDを指定して、.valueで取得です。

IDを使ったほうが取得しやすいとき、nameのほうが適切な時などあるので、上手く使い分けていきたいですね。