Close icon
2017月11日15日

jQuery でチェックボックスの状態を取得/設定する

jQuery でチェックボックスの状態を取得したり設定したり、結構よく使うのに方法がいろいろあったりします。ただ現時点(2017年11月)での最適解はおそらく今回紹介するもの。

<input type="checkbox" name="checkbox_1" checked>
<input type="checkbox" name="checkbox_2">

チェックボックスがチェックされているかを取得する。

// 便宜的に式で評価してみる
if ( $('input[name=checkbox_1]').prop('checked') ) {
  console.log('true');
} else {
  console.log('false');
}

// 別に以下でも確認できる
console.log( $('input[name=checkbox_1]').prop('checked') );

jQuery のセレクタで書いている部分はお好きに。

次にセレクタで指定したチェックボックスにチェックを入れる。

$('input[name=checkbox_2]').prop('checked', true);

最後に同じ方法でセレクタで指定したチェックボックスのチェックを外す。

$('input[name=checkbox_2]').prop('checked', false);

このくらいはテンプレ的に覚えておくと便利です。

豆知識

.prop() メソッドは対象のセレクタに対して、第一引数で指定した属性の値を取得する、もしくは第二引数で指定した値を設定する。例えば 画面内の全てのチェックボックスの値をON/OFF みたいな場合はセレクタは集合で取得していてもOK(厳密には jQuery のセレクタでの取得自体集合で取れているとかはまた別の話)なので以下でできる。

// 全てをチェック
$('input[type=checkbox]').prop('checked', true);
// 全てのチェックを外す
$('input[type=checkbox]').prop('checked', false);

現実的にはセレクタに input[type=checkbox] を使う前に、親DOMとかのセレクタも指定しておくといい感じです。



アトトックラボとは

株式会社アトトックメンバー が技術の話、デザインの話、キャラクターの話、ときどき脱線してガジェットの話やライフハックの話など好きなことを書いています。


連載記事


最近の記事


タグ