jQueryで一括でチェックボックスにチェックを付ける、外す。

リストの横にあるチェックボックスに【一括でチェックを入れる】という用途のボタンを配置することが多いと思います。そのサンプル実装です。以下の様なHTMLを用意します。

<label for="test1">
    <input type="checkbox" name="a" value="checked1" class="checkbox" id="test1"> checkbox1
</label>
<label for="test2" class="checkbox">
    <input type="checkbox" name="b" value="checked2"  class="checkbox" id="test2"> checkbox2
</label>
<label for="test3" class="checkbox">
    <input type="checkbox" name="c" value="checked3"  class="checkbox" id="test3"> checkbox3
</label>

<button id="allcheck">all check</button>
<button id="removecheck">remove check</button>

スクリプトは以下のように記述します。allcheckが押された時に、classがcheckboxのチェックボックスに対してすべてチェックを入れます。removecheckが押された時は、その逆でチェックを全て外します。

// 全部チェックを入れる
$("#allcheck").click(function () {
  $('.checkbox').prop('checked', true);
});

// 全部チェックを外す
$("#removecheck").click(function () {
  $('.checkbox').prop('checked', false);
});

とても簡単に実装できるので、ぜひ追加してみてください。では。