チェックボックスを一括で選択/解除

複数のチェックボックスに対し一括でOn/Off

jQuery

$(function () { // 一括チェック、チェック解除 $('#onoff').change(function() { if ($(this).prop('checked')) { // 選択 $('input').prop('checked', true); $('label[for=onoff]').text('チェック解除'); } else { // 解除 $('input').prop('checked', false); $('label[for=onoff]').text('一括チェック'); } }); $('input').trigger('change'); $('input').change(function() { // 切り替えチェックボックス以外の選択総数 var checked_length = $('input[id!=onoff]:checked').length; // 全てチェックされていない if (checked_length == 0) { // 切り替えチェックボックスの解除 $('#onoff').prop('checked', false); $('label[for=onoff]').text('一括チェック'); } // 全てチェックされている if (checked_length == 7) { // 切り替えチェックボックスを選択 $('#onoff').prop('checked', true); $('label[for=onoff]').text('チェック解除'); } }); });

HTML

<input type="checkbox" id="onoff"> <label for="onoff">一括チェック</label> <input type="checkbox" id="all" name="all" value="1"> <label for="all">総合</label> <input type="checkbox" id="general" name="general" value="1"> <label for="general">一般</label> <input type="checkbox" id="social" name="social" value="1"> <label for="social">社会</label> <input type="checkbox" id="economics" name="economics" value="1"> <label for="economics">政経</label> <input type="checkbox" id="life" name="life" value="1"> <label for="life">生活</label> <input type="checkbox" id="entertainment" name="entertainment" value="1"> <label for="entertainment">芸能</label> <input type="checkbox" id="knowledge" name="knowledge" value="1"> <label for="knowledge">科学</label>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について