jQuery でのチェックボックスの操作と、チェック状態の取得

最終更新:2018-12-06 by Joe

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
checked属性とcheckedプロパティ

これは大事なポイントですので、ドキュメントからも引用します。

the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

引用元:jQuery Document: .prop()

抄訳:
覚えておくべき最も大きなコンセプトは、checked属性はcheckedプロパティと連携しないという点だ。実際は、defaultCheckedプロパティと連携し、チェックボックの初期値をセットするためだけに使われるべきだ。checked属性の値はチェックボックスの状態を変更せず、checkedプロパティこそがそれを行う。それ故、チェックボックスがチェックされているかどうかを知るための、ブラウザーを越えて有効な方法は下記である。

  • if ( elem.checked )
  • if ( $( elem ).prop( “checked” ) )
  • if ( $( elem ).is( “:checked” ) )

参考

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