jqueryでラジオボックス、チェックボックスの制御について

よく使うけど、よく忘れるから、今回は、まとめてみた。

■ラジオボックスについて
ソースコード例）
----
<p class="radio-area">
    <input type="radio" name="lang" value="php" id="php">PHP
    <input type="radio" name="lang" value="java" id="java">Java
</p>
----

まず、ラジオボックスについては、

＞ラジオボックスの選択
上記ソースコードで、PHPを選択状態にするとき、下記三つの方法がある。

①$('input[name=lang]:checked').val(['php']);

②$('input[name=lang]:eq(0)').prop('checked', true);

③$('#php').attr('checked', 'checked');

③がたまに、効かないと、よく、他のブログに見かける情報だけど、実際は、
上記の「①、②」と「③」を分けて使わないといけないらしい。

というのは、

・「①、②」は、上記のソースコードがすでにレンダリングし、描画された場合に、
使うこと。
・「③」は、上記のソースコードを動的に生成する際に、使うこと。
※「①、②」を使っても、効かない。

＞ラジオボックスの状態取得
上記ソースコードで、phpが選択されている状態だとして、下記の方法で取得できる。

①$('input[name=lang]:checked').val() === 'php';

②$('input[name=lang]:eq(0)').prop('checked');

③$('input[name=lang]:eq(0)').is(':checked');

個人としては、②をおすすめする。特に、理由はないいい。＾－＾。



■チェックボックスの選択について
ソースコード例）
----
<p class="check-area">
    <input type="checkbox" name="lang" value="php" id="php">PHP
    <input type="checkbox" name="lang" value="java" id="java">Java
</p>
----

＞チェックボックスの選択
PHPにチェックを入れたい場合、下記の方法で
①$('#php').attr('checked','checked');
②$('#php').prop('checked',true);

上記方法も分けて使える。

・「①」は、上記のソースコードを動的に生成する際に、使うこと。
・「②」は、上記のソースコードがすでにレンダリングし、描画された場合に、
使うこと。

＞チェックボックスの状態取得
下記の方法で、PHPがチェックされているかを取得できる。
①$('#php:checked').val();
②$('#php').prop('checked');

以上。