最近仕事でjQueryを使うことが多くなったので、記事にしていきたいと思います。
IDを使って値を取得する方法です。
テキストボックスの値を取得する
まずはテキストボックスの値を取得する方法です。
HTMLは仮に次のようにします。
|
1 |
<input type="text" id="textbox01" value="hogehoge" /> |
jQuery、JavaScriptそれぞれ次のように取得します。
jQuery
|
1 |
var textbox01 = $('#textbox01').val(); //hogehoge |
JS
|
1 |
var textbox01 = document.getElementById('textbox01').value; //hogehoge |
ラジオボタンの値を取得する
次はラジオボタン。
HTMLは仮に次のようにします。
|
1 2 |
<input type="radio" id="radio01" value="hogehoge" /> <input type="radio" id="radio02" value="hoge" /> |
「チェックが付いているほうの値を取得」なら、name属性を使えばチェックが付いたほうを判別しやすいです。
今回はIDを使って値を取得ということで、チェックなど関係なく。
jQuery
|
1 |
var textbox01 = $('#radio01').val(); //hogehoge |
JS
|
1 |
var textbox01 = document.getElementById('radio01').value; //hogehoge |
ドロップダウンリストの値を取得する
次のようなドロップダウンリストを用意しました。
HTML
|
1 2 3 4 5 6 |
<select id="select01"> <option value="1">値１</option> <option value="2">値２</option> <option value="3" selected>値３</option> <option value="4">値４</option> </select> |
選択肢は複数ありますが、jQueryでもJavaScriptでも、選択されているところの値が取得されます。
jQuery
|
1 |
var select01 = $('#select01').val(); //3 |
JS
|
1 |
var select01 = document.getElementById('select01').value; //3 |
まとめ：IDを使って値取得
jQueryなら、IDを指定して、.val()で値取得です。
JavaScriptなら、document.getElementByIdでIDを指定して、.valueで取得です。
IDを使ったほうが取得しやすいとき、nameのほうが適切な時などあるので、上手く使い分けていきたいですね。
