チェックボックスを一括で選択/解除
複数のチェックボックスに対し一括で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>
サンプル
