HTML
<ul>
<li><label><input type="checkbox" id="all" /> Check all</label></li>
<li><label><input type="checkbox" name="check" value="1" /> value 1</label></li>
<li><label><input type="checkbox" name="check" value="2" /> value 2</label></li>
<li><label><input type="checkbox" name="check" value="3" /> value 3</label></li>
<li><label><input type="checkbox" name="check" value="4" /> value 4</label></li>
</ul>
jQuery
//全選択・全解除をクリックしたとき
$('#all').on('change', function() {
//チェックしたチェックボックスの状態を他のチェックボックスに反映
$('input[type=checkbox]').prop('checked', this.checked);
});
上記の場合、HTML上の全チェックボックスへ反映してしまうため、以下のように
範囲を絞って反映するとより安心感があります。
//全選択・全解除をクリックしたとき
$('#all').on('change', function() {
// idがupdateAreaの子要素のcheckboxにのみチェック状態を反映
$("'input[type=checkbox]'", "#updateArea").prop('checked', this.checked);
});
