チェックボックスを全てチェックする・全て外す【jQuery】

JavaScript

2022.07.162022.07.02

チェックボックスで選択肢が多い際に、「すべてのチェックを一度につけたい」というケースがあります。

今回は、そのような場合に利用するコードの事例を紹介します。

デモ
jQueryコード解説
1. チェックボックスの値の取得・変更
  1. チェック状態を取得する
  2. チェック状態を変更する
2. 全チェックボックスのチェック状態を確認して、変更する

デモ

See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.

jQueryコード解説

チェックボックスの値の取得・変更

チェック状態を取得する

$(elem).prop("checked");

チェック状態を変更する

//チェックする
$(elem).prop('checked', true);

//チェックを外す
$(elem).prop('checked', false);

全チェックボックスのチェック状態を確認して、変更する

前述のコードを利用して、すべてのチェックボックスのチェック状態を変更します。

//クラス名が「check」の分だけ繰り返し処理する。引数のiは繰り返し回数。elemは対象となっている要素。
$(".check").each(function (i, elem) {
   //対象要素がクリックされているかチェックする。
　if($(elem).prop("checked") == false){
       //チェックされていなければチェックをつける。
　    $(elem).prop('checked', true);
　}
})

※「$(“要素”).each(function(){ 」は要素の分だけ繰り返し処理をするコードです。