気軽に楽しくプログラムと遊ぶ

自分が興味があってためになるかもって思う情報を提供しています。

jQueryでcheckboxの全選択をシンプルに実装する

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