【jQuery】checkboxの全選択/全選択解除を簡単に作る

Tweet

Category JavaScript / Tagged jQuery 2012/01/11

よくある定番の機能です。

IMAGE

JavaScript

$(function() {
  $('#all').on("click",function(){
    $('.list').prop("checked", $(this).prop("checked"));
  });
});

HTMLで、全選択したいチェックボックスにclass=”list”を、全選択/解除機能をつけたいチェックボックスにid=”all”をつければ完成です。

アレンジして、チェックボックスに class=”list” をしないで、「あるdivに入っているチェックボックス」、「id=”all”のチェックボックスと同じtableに入っているチェックボックスたち」といった指定もよいです。

DEMO