jQueryでチェックボックスの取得・判定・イベントまとめ【サンプル有】

チェックボックスにチェックされた値を取得する

チェックボックスでチェックされた値(value要素)の取得は、:checkedとなっている要素をeachで繰り返し、すべて取得しております。

下記のサンプルは、ボタンを押したときに現在チェックが入っている値をカンマ区切りで表示しています。

サンプルコード
<input type="checkbox" name="check1" value="apple">りんご
<input type="checkbox" name="check1" value="banana">バナナ
<input type="checkbox" name="check1" value="grape">ぶどう
<p class="result1"></p>

<input type="button" class="button1" value="選択内容を取得する">

<script>
$(function(){
    $('.button1').click(function(){
        var aryCmp = [];
        $('[name="check1"]:checked').each(function(index, element){
            aryCmp.push($(element).val());
        });
        $('.result1').html(aryCmp.join(','));
    });
});
</script>
実行結果
りんご バナナ ぶどう

チェックボックスの値がチェックされているか判定する

値の判定には、$(‘要素’).prop(‘checked’)がtrueかfalseかで判定を行えます。

特定の値のチェックボックスを判定したい場合は、$(‘要素’).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)

で代入できます。

サンプルコード
<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>
実行結果
りんご バナナ ぶどう

後から(動的に)追加されたチェックボックスにイベントを設定する

JavaScriptやAjaxからチェックボックスを生成した場合、要素を指定しても、事前に設定しておいたイベントは実行できません。

イベント設定時にその要素はまだ存在しなかったからです。

後から追加された要素にも設定したイベントを発火したい場合は、$(doument).onで実行しましょう。

サンプルコード
<div class="js_area"></div>

<script>
$(function(){
    //チェックしたらアラートを実行(要素がないため、これは実行されない)
    $('[name="check5"]').change(function(){
        alert('checked!');
    });
    //チェックしたらアラートを実行(documentの中から拾っているため、これは実行される)
    $(document).on('change', '[name="check5"]', function(){
        alert('checked!!!');
    });
    //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>
実行結果
りんご バナナ ぶどう オレンジ いちご

チェックボックスもよく使うフォーム部品なので、各種仕様を把握しておきましょう。

他のフォームのjQuery操作も合わせてご確認ください。

以上、jQueryでチェックボックスの取得・判定・イベントまとめ、でした。

コメント

タイトルとURLをコピーしました