読了目安時間は約 9 分です。
今回は、jQueryでチェックボックスを変更する方法をご紹介します。
「チェックボックス、全部チェック入れる・全部チェックを外す、特定のグループを全部チェック入れる・全部チェックを外す、という機能がほしい」というクライアント様のご要望があり、お応えしたときの自分なりの方法を備忘録的に記事にいたします。
jQuery
var $ = jQuery;
$(document).ready(function () {
//チェックを全部入れる
$('input[name="check-all"]').on('click', function() {
$('input[type="checkbox"]').attr('checked', true).prop('checked', true).change();
});
//チェックを全部外す
$('input[name="uncheck-all"]').on('click', function(){
$('input[type="checkbox"]').removeAttr('checked').prop('checked', false).change();
});
// カテゴリーAのチェックを全部入れる
$('input[name="check-a"]').on('click', function() {
$('input[name="category-a"]').attr('checked', true).prop('checked', true).change();
});
// カテゴリーAのチェックを全部外す
$('input[name="uncheck-a"]').on('click', function(){
$('input[name="category-a"]').removeAttr('checked').prop('checked', false).change();
});
//グループ1のチェックを全部入れる
$('input[name="check-1"]').on('click', function() {
$(".group1").attr('checked', true).prop('checked', true).change();
});
//グループ1のチェックを全部外す
$('input[name="uncheck-1"]').on('click', function(){
$(".group1").removeAttr('checked').prop('checked', false).change();
});
//グループ2のチェックを全部入れる
$('input[name="check-2"]').on('click', function() {
$(".group2").attr('checked', true).prop('checked', true).change();
});
//グループ2のチェックを全部外す
$('input[name="uncheck-2"]').on('click', function(){
$(".group2").removeAttr('checked').prop('checked', false).change();
});
});
HTML
<form action="?" method="POST"> <p> カテゴリーA<br> 第1グループ<br> <label><input type="checkbox" name="category-a" class="group1" value="1"> チェックボックス1</label> <label><input type="checkbox" name="category-a" class="group1" value="2"> チェックボックス2</label> <br> 第2グループ<br> <label><input type="checkbox" name="category-a" class="group2" value="3"> チェックボックス3</label> <label><input type="checkbox" name="category-a" class="group2" value="4"> チェックボックス4</label> <br> <br> カテゴリーB<br> 第1グループ<br> <label><input type="checkbox" name="category-b" class="group1" value="1"> チェックボックス1</label> <label><input type="checkbox" name="category-b" class="group1" value="2"> チェックボックス2</label> <br> 第2グループ<br> <label><input type="checkbox" name="category-b" class="group2" value="3"> チェックボックス3</label> <label><input type="checkbox" name="category-b" class="group2" value="4"> チェックボックス4</label> </p> <br> <p> <input type="button" name="check-all" value="チェックを全部入れるボタン"> <input type="button" name="uncheck-all" value="チェックを全部外すボタン"> <br> <input type="button" name="check-a" value="カテゴリーAのチェックを全部入れるボタン"> <input type="button" name="uncheck-a" value="カテゴリーAのチェックを全部外すボタン"> <br> <input type="button" name="check-1" value="第1グループのチェックを全部入れるボタン"> <input type="button" name="uncheck-1" value="第1グループのチェックを全部外すボタン"> <br> <input type="button" name="check-2" value="第2グループのチェックを全部入れるボタン"> <input type="button" name="uncheck-2" value="第2グループのチェックを全部外すボタン"> </p> <p> <input type="submit" value="送信"> </p>
HTMLは、チェックボックスがチェックされるとchecked属性が付加されます。
.attr()を使うとchecked属性が付加されなかったりブラウザが反応しないことがあるので、.prop()と.change()も併用して使います。
.prop()は.attr()と同じようなものですが、バージョン1.6くらいからじゃないと使えません。古いバージョンを考慮しなければ.prop()だけでもいいと思います。
.prop()だけだとうまくいかないことがあるので、.change()で実行させます。
.attr()でchecked属性の追加＆削除も行なうことで、トラブルを軽減できます。チェックを外す場合は.removeAttr('checked')。
「間違ってるぞ」「もっといい方法あるぞ」という方はご教授ください！
