jQueryでチェックボックスを操作

Pocket

前にも書いたことがあるかもしれませんが、jQueryでチェックボックスを操作する方法をまとめます。

次のHTMLのようなチェックボックスがあったとします。

<input type="checkbox" id="c0">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3" checked>
<input type="checkbox" id="c4" checked>

次のjQueryを実行します。

$("#c0").prop("checked", true);
$("#c1").prop("checked", "checked");
$("#c2").prop("checked", "dog");
$("#c3").prop("checked", false);
$("#c4").prop("checked", "");

上から3行はチェックを入れます。「checked」に「true」をセットするのが基本のようです。
3行目は「dog」とありますが、要するに空でない文字列ならば「true」と判断されるので何でもよいようです。

下から2行はチェックを外します。「checked」に「false」をセットするのが基本のようです。
最下行は空文字ですが「false」と判断されるため、これでも外れます。

※Chrome24、IE6、jQuery1.9.1で確認しました。

[ 2013年2月19日 | カテゴリー: JavaScript | タグ: , , , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報