jQuery checkboxの扱い方

今回はjQueryのcheckboxの扱い方をまとめてみました

チェックボックスの宣言

<input type="checkbox" class="checkbox_c" id="checkbox1" value="1" checked>

オブジェクトの指定は

$('#ID名')　になります。

今回のID名はcheckbox1になります。

クラス名を指定したい時はドットにし、

$('.checkbox_c')のように書きます。

では実際に使う方法を記載していきます。

チェックボックスのチェックを入れる

$('#checkbox1').prop('checked', true);

チェックボックスのチェックを外す

$('#checkbox1').prop('checked', false);

チェック状態を取得する

$('#checkbox1').prop('checked');

changeイベントの書き方

$('#checkbox1').change(function() {
    

     alert("change");

})

同じclassの全チェックボックス状態を取得する

    let targets = document.querySelectorAll("input[type='checkbox'][class='checkbox_c']");

    let cnt=0;

    for (const i of targets) {
        if(i.checked){
            cnt++;
        }
    }

同じclassの全チェックボックスを付ける、外す

    let targets = document.querySelectorAll("input[type='checkbox'][class='checkbox_c']");

    let cnt=0;

    for (const i of targets) {
           i.checked=true;  //←全てチェックを付ける場合

           i,checked=false; //←全てチェックを外す場合
    }

閲覧頂き、ありがとうございました。

またjQueryについて役立つ情報を掲載していきますね！！

広告