ちょいちょいわからなくなるcheckbox, radio, selectboxの値の取り方 #JavaScript

前書き

重要なのは、selectorの使い方
重要なのは、propの使い方

selectbox

<select id="select" name="select">
    <option value="0">sample</option>
    <option value="1">sample1</option>
    <option value="11">sample11</option>
    <option value="101">sample101</option>
</select>

$("#select").val()

選択中のoptionのvalueを取ってくれる。multipleのselectboxでも配列で（[value1, value2]）取ってくれる。

selectboxのtextを取得したい

$("#select").text()

こうしてしまうと、全optionのtextがでてくる。選択中のoptionのtextが欲しい場合は以下。

$("#select option:selected").text()

selectorの:selectedを使用する。selectboxなのでselected。
:selected Selector (http://api.jquery.com/selected-selector/)

multipleで複数選択している場合、残念ながら配列では返してくれない。
（[text1, text2]こんな感じにはならない）

複数選択している場合は、eachを使う。

var text = [];
$("#select option:selected").each(function() {

    text.push( $(this).text() );

});

radio

<input type="radio" name="radio-group" value="0">
<input type="radio" name="radio-group" value="1">
<input type="radio" name="radio-group" value="2">

基本はnameでグループ化するのでnameで取得することが多いと思う。

以下はダメな書き方

$("[name=radio-group]").val()

radioに限った話ではなく、同じnameがたくさんある場合、最初にヒットしたvalueだけ返ってくる。
こういう時はやはりselectorを使う。

焦らしてもう一つダメな書き方

$("[name=radio-group]:seleted").val()

先ほどのselectboxの:selectedを使ってみる。結果はエラー。selectboxじゃないからエラー。
checkboxとradioは別のselectorである:checkedを使う、となっている。

チェックされているradioの値を取得する

次は動く書き方

$("[name=radio-group]:checked").val()

上記の書き方で選択中のradioだけ取ってきてくれる。
ちなみにselectboxでしか:selectedは使えないけど、:checkedはselectboxでも使える。selectedの存在意義がうすい。

$("#select option:checked").text()

:checked Selector (http://api.jquery.com/checked-selector/)

valueはどうでもよくて特定のradioが選択されているかどうか知りたい場合はpropを使う（attrじゃないよ）。
checkboxも同じなのでpropについてはcheckboxの章で解説する。

checkbox

<input type="checkbox" name="checkbox1" value="1">
<input type="checkbox" name="checkbox2" value="2">
<input type="checkbox" name="checkbox3" value="3">

group化してないcheckbox。

チェックされているcheckboxの値を取得する

$("[name=checkbox1]").val()

上記の場合、チェックされていてもされてなくても、ただvalueを取るだけ。
チェックされている場合、値を取得したい場合は、radioと同じ。

$("[name=checkbox1]:checked").val()

この場合、チェックされていたらvalueを返す。チェックされていなかったらヒットする要素自体がないのでundefinedが返る。
もし同じnameの要素が複数あり、checkedで返る要素が複数の場合、selectboxのmultipleと同じようにeachを使う。

チェックされているかどうかをチェックする

$("[name=checkbox1]").prop("checked")

チェックされていたらtrue、チェックされていなかったらfalseが返る。

おまけ：typeのselector

<input type="checkbox" name="checkbox1" value="1">

タイプで要素を取得したい場合、以下で取得できる。

$("[type=checkbox]")

typeはselectorでも取得できる。

$(":checkbox")

ただこの場合、画面上のすべてのcheckboxを取得してしまうので、htmlの書き方を工夫する。

<div class="checkbox">
    <input type="checkbox" name="checkbox1" value="1">
    <input type="checkbox" name="checkbox2" value="2">
    <input type="checkbox" name="checkbox3" value="3">
</div>

$(".checkbox :checkbox")

これで特定DIV内のcheckboxのみ取得できる。

$(".checkbox :checkbox:checked")

選択中のすべてのcheckboxが取得できる。これはeach使うパターン。