jQueryでチェックボックスを操作する機会がよくあるので、チェックしたチェックボックスの値を取得する方法を備忘録的に記載しておきます。
もくじ
フォーム例
例えば下記のようなformがあるとします。
<form class="form" action="/">
<label for="id1"><input type="checkbox" name="checkbox1" id="id1" value="val1">val1</label>
<label for="id2"><input type="checkbox" name="checkbox1" id="id2" value="val2">val2</label>
<label for="id3"><input type="checkbox" name="checkbox1" id="id3" value="val3">val3</label>
<input type="button" value="実行" id="btn">
</form>
チェックが入ったチェックボックスのvalueを取得する方法
ボタンをクリックするとチェックが入ったチェックボックスのidやvalueを取得します。
動作サンプル
JSサンプル
$(function(){
$('#btn').on('click', function() {
$('.form input[type=checkbox]:checked').each(function() {
var value = '<span>'+$(this).val()+'</span>';
$(value).appendTo($('.form p'));
});
});
});
解説
$('input[type=checkbox]:checked')でチェックが入っているチェックボックスを指定しています。
複数のチェックが入っていた時にも対応できるよう、.each(function(){});で回しています。
valueは$('要素').val()で取得できます。
チェックボックスのチェック状況を判定する方法
ボタンをクリックすると、チェック状況に応じて処理が走ります。
動作サンプル
JSサンプル
$(function(){
$('#btn').click(function() {
$('.form input[type=checkbox]').each(function() {
var value = '<span>'+$(this).val()+'</span>';
if( $(this).prop("checked") != true ) {
// チェックが入っていなかった場合
console.log('value');
} else {
// チェックが入っていた場合
alert('value');
}
});
});
});
解説
複数のチェックボックスのチェック状況を取得するため、$('input[type=checkbox]').each(function()で回しています。$(this).prop("checked")でチェック状況を取得しています。
valueは$('要素').val()で取得できます。
特定のチェックボックスにチェックを入れる方法
ボタンをクリックすると「val1」にチェックが入ります。
動作サンプル
JSサンプル
$(function(){
$('#btn').click(function() {
// val1にチェックを入れる
$('#id1').attr('checked', true).prop('checked', true).change();
});
});
解説
.prop('checked', true)でチェックボックスにチェックを入れています。
全てのチェックボックスにチェックを入れる方法
ボタンをクリックすると全てのチェックボックスにチェックが入ります。
動作サンプル
JSサンプル
$('#btn').on('click', function() {
// 全てのチェックボックスにチェックを入れる
$('.form input[type=checkbox]').attr('checked', true).prop('checked', true).change();
});
解説
.attr('checked', true)でchecked属性の追加を行っています。.prop('checked', true)でチェックボックスにチェックを入れています。.chenge()で明示的にイベントを起こしてうまく表示できるようにしています。
特定のチェックボックスからチェックを外す方法
ボタンをクリックすると「val1」からチェックが外れます。
動作サンプル
JSサンプル
$(function(){
$('#btn').click(function() {
// val1からチェックを外す
$('#id1').removeAttr("checked").prop("checked", false).change();
});
});
解説
.prop('checked', true)でチェックボックスからチェックを外しています。
全てのチェックボックスからチェックを外す方法
ボタンをクリックすると全てのチェックボックスからチェックが外れます。
動作サンプル
JSサンプル
$('#btn').on('click', function() {
// 全てのチェックボックスからチェックを外す
$('.form input[type=checkbox]').removeAttr("checked").prop("checked", false).change();
});
解説
.attr('checked', false)でchecked属性の削除を行っています。.prop('checked', false)でチェックボックスのチェックを外しています。.chenge()で明示的にイベントを起こしてうまく表示できるようにしています。
チェックボックスにチェックが入った時にイベントを発火させる方法
チェックボックスにチェックが入った時に値を取得してみます。
動作サンプル
JSサンプル
$('.form input[type="checkbox"]').change(function() {
var value = '<span>'+$(this).val()+'</span>';
$(value).appendTo($('.form p'));
});
解説
$(要素).change(function() {});でチェックボックスにチェックが入ったor外れた時にイベントを発火します。
チェックボックスのチェック状況を判定してクラスを付け替えたりしてもいいと思います。
まとめ
チェックボックスの入り切りには.prop()を使います。
値の取得には.val()を使います。
チェックするという動作をトリガーにするには、.chenge()を使います。
チェックボックスを操作する方法をまとめてみました。
忘れた頃に思い返して使っていきたいと思います。
