jQueryでチェックボックスの取得・判定・イベントまとめ【サンプル有】
jQueryでチェックボックスの操作についてまとめました。
値の取得、チェックの操作（外す・付ける）、チェックされているかの判定、チェック時のイベント処理など、チェックボックスに関わる処理をご確認ください。
チェックボックスの値を取得する
単純にチェックボックスの値(value値)を取得したい場合は、他のフォーム部品同様に、$(セレクタ).val()で取得できます。
<input type="checkbox" name="check1_1" value="apple">りんご
<input type="button" class="button1_1" value="選択内容を取得する">
<script>
$(function(){
$('.button1_1').click(function(){
alert( $('[name="check1_1"]').val() );
});
});
</script>
value値を拾うため、この例ではチェックの有無関係なしで取得ができます。
チェックが入っている場合のみ取得したい場合は、後述の「チェックボックスの値がチェックされているか判定する」と合わせて記述してください。
同じnameのチェックボックスでチェックが入った要素をまとめて取得する
チェックボックスでチェックされた値（value要素）の取得は、:checkedとなっている要素をeachで繰り返すことでまとめて取得できます。
下記のサンプルは、ボタンを押したときに現在チェックが入っている値を一覧で表示させています。
<input type="checkbox" name="check1_2" value="apple">りんご
<input type="checkbox" name="check1_2" value="banana">バナナ
<input type="checkbox" name="check1_2" value="grape">ぶどう
<p class="result1_2"></p>
<input type="button" class="button1_2" value="選択内容を取得する">
<script>
$(function(){
$('.button1_2').click(function(){
$('.result1_2').empty();
$('[name="check1_2"]:checked').each(function(index, element){
$('.result1_2').append('<p>' + $(element).val() + '</p>');
});
});
});
</script>
チェックボックスの値がチェックされているか判定する
値の判定には、$('要素').prop('checked')がtrueかfalseかで判定を行えます。
参考 jQueryで属性を設定するattrとpropの使い方
特定の値のチェックボックスを判定したい場合は、$('要素').val('値').prop('checked')でvalの値も指定してください。
<input type="checkbox" name="check2" value="apple">りんご
<input type="button" class="button2" value="りんごにチェックが入っているか判定する">
<script>
$(function(){
$('.button2').click(function(){
if($('[name="check2"]').prop('checked')){
alert('checked!');
}else{
alert('not checked!');
}
});
});
</script>
チェックボックスのチェックを代入する、外す
チェックボックスにチェックを入れたい場合は$('要素').prop('checked', true)、チェックを外す場合は、$('要素').prop('checked', false)と設定します。
似たような関数のattrは対応していないので注意しましょう。
<input type="checkbox" name="check3" value="apple">りんご
<input type="button" class="button3_1" value="チェックを入れる">
<input type="button" class="button3_2" value="チェックを外す">
<script>
$(function(){
$('.button3_1').click(function(){
$('[name="check3"]').prop('checked', true);
});
$('.button3_2').click(function(){
$('[name="check3"]').prop('checked', false);
});
});
</script>
チェックボックスにチェックした時にイベントを発火させる
チェックボックスにチェックを入れた際、イベントを実行したい場合は、$('要素').change('[name=""]')で行えます。
下記のサンプルは、チェックを入れた時にイベントを発火させ、現在チェックが入っている値をカンマ区切りで表示しています。
<input type="checkbox" name="check4" value="apple">りんご
<input type="checkbox" name="check4" value="banana">バナナ
<input type="checkbox" name="check4" value="grape">ぶどう
<p class="result4"></p>
<script>
$(function(){
$('[name="check4"]').change(function(){
var aryCmp = [];
$('[name="check4"]:checked').each(function(index, element){
aryCmp.push($(element).val());
});
$('.result4').html(aryCmp.join(','));
});
});
</script>
イベントを発火させたチェックボックスにチェックが入っているかを調べる場合
イベントを引き起こしたチェックボックスにチェックが入っているかどうかを調べたい場合は、イベントを発火させた要素を見ることが出来る$(this)を使うと便利です。
<input type="checkbox" name="check4_1" value="apple">りんご
<script>
$(function(){
$('[name="check4_1"]').change(function(){
if( $(this).prop('checked') ){
alert('チェックを入れました');
}else{
alert('チェックを外しました');
}
});
});
</script>
後から（動的に）追加されたチェックボックスにイベントを設定する
JavaScriptやAjaxからチェックボックスを生成した場合、要素を指定しても、事前に設定しておいたイベントは実行できません。
イベント設定時にその要素はまだ存在しなかったからです。
後から追加された要素にも設定したイベントを発火したい場合は、$(doument).onで実行しましょう。
<div class="js_area"></div>
<script>
$(function(){
//チェックしたらアラートを実行（要素がないため、これは実行されない）
$('[name="check5"]').change(function(){
alert('change!');
});
//チェックしたらアラートを実行（documentの中から拾っているため、これは実行される）
$(document).on('change', '[name="check5"]', function(){
alert('change!!!');
});
//js_areaにセレクトボックスを生成する
$('.js_area').html('<input type="checkbox" name="check5" value="apple">りんご');
});
</script>
こうすることで、document要素（要はページ全体）にイベントが設定され、それが[name="check5″]だった場合処理を行う、という流れになるため、後から追加された要素も対応できます。
チェックボックスに同時に付けられるチェックの数を制限する
同じname属性に付けられるチェックの数を制御したい場合は、逐次判定を行い、指定の個数を超えたらdisabledでチェックボックスを無効にします。
チェックされている数の判定は、change(チェック時)の他、リロードや「戻る・進む」ボタンでページ読み込み後に既にチェックが入っている場合もあるため、ページ読み込み時にもチェック数の判定が必要になります。
そのため、読み込み時とチェック時に同一の処理を行うため、1つの関数にまとめました。
<input type="checkbox" name="check6" value="apple">りんご
<input type="checkbox" name="check6" value="banana">バナナ
<input type="checkbox" name="check6" value="grape">ぶどう
<input type="checkbox" name="check6" value="orange">オレンジ
<input type="checkbox" name="check6" value="strawberry">いちご
<script>
$(function(){
//リロード等の読み込み時は初期状態からチェックが入っているため、関数で判定を行う
checkedLimit();
//チェック時に制限チェックの関数で判定を行う
$('[name="check6"]').change(function(){
checkedLimit();
});
//イベントの他、初回読み込み時に実行したいため、関数にまとめる
function checkedLimit(){
$('[name="check6"]').prop('disabled', false);
var len = $('[name="check6"]:checked').length;
//2つ目のチェックが入ったら、残りのチェックボックスを触れなくする
if(len >= 2){
$('[name="check6"]').not(':checked').prop('disabled', true);
}
}
});
</script>
チェックボックスと連動させて、チェックされたらボタンを有効にする
チェックボックスのチェックと連動させてボタンの有効化／無効化を切り替えることも出来ます。
利用規約にチェックを入れさせて次へ進むなど、ユーザーに操作させた上で処理したい場合などで有用です。
<input type="checkbox" name="check7" value="doui"> 同意する
<input type="button" class="button7_1" value="ボタン" disabled>
<script>
$(function(){
//リロード等の読み込み時は初期状態からチェックが入っているため、関数で判定を行う
checkedButton();
//チェック時に制限チェックの関数で判定を行う
$('[name="check7"]').change(function(){
checkedButton();
});
//有効になったボタンのクリック処理
$('.button7_1').click(function(){
alert('click!');
});
//イベントの他、初回読み込み時に実行したいため、関数にまとめる
function checkedButton(){
if($('[name="check7"]').prop('checked')){
$('.button7_1').prop('disabled', false);
}else{
$('.button7_1').prop('disabled', true);
}
}
});
</script>
チェックボックスもよく使うフォーム部品なので、各種仕様を把握しておきましょう。
他のフォームのjQuery操作も合わせてご確認ください。
以上、jQueryでチェックボックスの取得・判定・イベントまとめ、でした。