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

      2016/05/23

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);
});

 

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

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,