jqueryでチェックボックスを一括変更する方法

チェック項目がたくさんある場合、一括でチェックをつけたり、はずしたりできるとユーザーの手間がだいぶ省けますよね。

ということで

html

<input type="checkbox" id="all" />全て
<div id="check">
<input type="checkbox"/>お金
<input type="checkbox"/>愛
<input type="checkbox"/>知識
<input type="checkbox" />時間
<input type="checkbox" />健康
</div>

全てのinputにid=”#all”、その他をdiv id=”#check”でくくっています。

jquery

$(function(){
    $('#all').click(function(){
    if(this.checked){
    $('#check input').attr('checked','checked');
    }else{
    $('#check input').removeAttr('checked');
    }
  });
});

まず

$('#all').click(function()

この部分でinput id=”#all”の部分をクリックしたらイベントが実行するように設定

if(this.checked)

これで、input id=”#all”の部分にチェックがついているかどうかを判断します。

$('#check input').attr('checked','checked');

チェックがついていたら↑上のイベントを実行
attrの意味は

attr('変更する属性名','変更後の属性値')

#checkで囲まれたinputに全て属性値checked（チェック）がつきます。

$('#check input').removeAttr('checked');

チェックがついていないときは↑上のイベントを実行します。
removeAttrの意味は

removeAttr('削除する属性名')

#checkで囲まれたinputの属性値checked（チェック）が全て消えます。