今回は、jQueryでチェックボックスをチェック状態にする方法について紹介します。
チェックボックスをクリックすればチェック状態にすることができますが、それ以外の動作の際にチェックを入れたいこともよくあります。
ボタンクリックで一括チェックとする例
例えば、他の要素のイベント発火時にチェックボックスにチェックを入れたい場合など、jQueryを使うことで簡単に実装することができます。
今回使用するHTMLは以下の通り。「全てチェック」ボタンをクリックすると、「犬」と「猫」どちらもチェック状態になるという例です。
HTML
|
1 2 3 4 |
<button id="button">全てチェック</button> <label><input id="dog" type="checkbox" name="pet" value="dog">犬</label> <label><input id="cat" type="checkbox" name="pet" value="cat">猫</label> |
プロパティを取得・設定する.prop()
prop()は、要素のプロパティを取得・設定するメソッドです。
prop('checked', true) でチェックができ、prop('checked', false) でチェックを外すことができます。
jQuery
|
1 2 3 |
$('#button').on('click', function() { $('input').prop('checked', true); }); |
属性を取得・設定する.attr()
attr()は、属性を取得・設定するメソッドです。
attr('checked', 'checked')でチェックができ、.removeAttr('checked')でチェックを外すことができます。
jQuery
|
1 2 3 |
$('#button').on('click', function() { $('input').attr('checked', 'checked'); }); |
.prop()と.attr()の違いと使い分け
prop()とattr()はどちらも、指定した属性値をもつ要素を取得したり、要素に属性を設定するメソッドです。
ですが、両者にはpropは「JavaScriptプロパティ（property）」を、attrは「HTML属性（attribute）」を扱うという違いがあります。
チェックボックスを扱う場合のprop()とattr()の違い
この違いが実際にどのような結果となるかを、チェックボックスの状態を取得する例で説明します。
チェックボックスがチェック状態の場合、以下のような結果になります。
・prop()で取得 → true
・attr()で取得 → checked
attr()ではHTMLに記述された属性「checked」をそのまま取得するのに対して、prop()ではJavaScriptで値を扱う時の「true」を取得します。
そのため、チェックボックスにチェックをつけるような動作に関しては、prop()メソッドが向いているでしょう。
