jQuery を使ったチェックボックスの操作方法です。現在のチェック状態を調べる方法もまとめました。

jQuery でのチェックボックスの値の取得方法

jQueryをつかったチェックボックの値を取得して、チェック状態を確認するには、.prop() 関数を使います。なお、返り値は、現在のチェックボックスの状態がboolenで返ってきます。これは、ラジオボタンでも同様ですね。

// チェックボックス（ラジオボタン）チェックする
$(elem).prop('checked', true);

// チェックボックス（ラジオボタン）をアンチェックする
$(elem).prop('checked', false);

.prop() とは、（jQueryでなく）HTML要素のプロパティにアクセスする関数です。HTML要素のプロパティを普段意識しないですが console.log で $(‘body’) を出力すると、その中にHTMLオブジェクトが抱え込まれているのがわかりますね。

jQuery でのチェックボックスのチェック方法

第二引数を省略すれば、返り値を現在の状態の取得に使うことができます。

if ($(elem).prop('checked', true)) {
  alert('チェックされています！')
}

【参考】よく似た他の jQuery関数について

1要素の「checked」プロパティ

こちらは純粋な要素のプロパティです。極めてシンプルに、アクセスして取得したり、書き換えたりできます。

// 要素がチェックされている時
console.log(elem.checked) // true

// 値を書き換える
elem.checked = false;

// 書き換わった値
console.log(elem.checked) // false

実際のjQueryにおける、.prop() 関数の実装も、主にこちらを書き換えるための実装となっているようです。

2属性の値を取得する、.attr()

.attr()は、要素の属性の値を取得したり、書き換えたり刷る関数です。同様に「checked属性」の値を取得できるのですが、.prop()関数と少し役割が異なります。

.prop()はboolenを返す。.attr()は、属性の文字列値を返す

例えば、<input type=”text” checked=”checked”>といった状態を考えます。戻り値は下記のように異なります。

console.log($(elem).prop('checked') // true
console.log($(elem).attr('checked') // 'checked'

.prop()はチェックプロパティを書き換える。.attr()は書き換えない（属性値のみを書き換える）

これは重要な動作の違いです。通常、チェックボックスは「checked」プロパティを保持しています。これが本来のチェックボックス状態を表します。

// 1: .prop() の場合
elem.checked = false;
$(elem).prop('checked', true);
console.log( elem.checked ); // true 

// 2: .attr() の場合
elem.checked = false;
$(elem).attr('checked', 'checked');
console.log( elem.checked ); // false

参考

チェックボックスの状態の操作と値の取得は、基本的には.prop()を使うべきだということが分かりました。公式ドキュメントもぜひご一読下さい。

• jQuery Document: .prop()