checkboxにチェックがされたかどうか判定する方法まとめ

2021-01-28

はじめに

checkboxのチェックがされたかどうかを判定する方法はいくつかあります。

ここでは、さまざまな判定方法をまとめます。

checkされたかどうか判定する方法

checkboxがチェックされたかどうかの判定する方法としては下記のような方法があります。

• document.getElementById('{id}’).checkedを利用する
• $('#{id}’).click()を利用する
• is(':checked’)を利用する
• .prop('checked’)を利用する
• .attr('checked’)を利用する

上記それぞれの利用方法をご紹介します。

document.getElementById('{id}’).checkedを利用する

getElementByIdメソッドでチェックボックスを取得し、チェックされていた場合はtrue、チェックがない場合はfalseを表示します。

<p>
    <input type="checkbox" id="chkbx" name="chkbx" />Agree
</p>
<input type="button" value="Click" onclick="showTxt()"/>
<div id="txt" style="display:none">
  Show TXT
</div>

function showTxt () {
    if(document.getElementById('chkbx').checked) {
        $("#txt").show();
    } else {
        $("#txt").hide();
    }
}

Clickボタンを実行すると、「Show TXT」が表示されます。

$('#{id}’).click()を利用する

jQueryのclickイベントでチェックされたかどうかを判定します。

<p>
    <input type="checkbox" id="chkbx" name="chkbx" />Agree
</p>
<div id="txt" style="display:none">
  Show TXT
</div>

$('#chkbx').click(function() {
    $("#txt").toggle(this.checked);
});

チェックボックスをチェックした後、「Show TXT」が表示されます。

is(':checked’)を利用する

is()に対して「:checked」を組み合わせて判定します。

<p>
    <input type="checkbox" id="chkbx" name="chkbx" />Agree
</p>
<input type="button" value="Click" onclick="showTxt()"/>
<div id="txt" style="display:none">
  Show TXT
</div>

function showTxt () {
    if($("#chkbx").is(':checked')){
        $("#txt").show(); 
    }
    else {
        $("#txt").hide();
    }
}

上記を簡潔にまとめると、こんな書き方もできます。

function showTxt () {
    $("#txt").toggle($("#chkbx").is(':checked'))
}

.prop('checked’)を利用する

jQuery 1.6以上のバージョンから利用できる方法です。

<p>
    <input type="checkbox" id="chkbx" name="chkbx" />Agree
</p>
<input type="button" value="Click" onclick="showTxt()"/>
<div id="txt" style="display:none">
  Show TXT
</div>

function showTxt () {
    if($("#chkbx").prop('checked')){
        $("#txt").show(); 
    }
    else {
        $("#txt").hide();
    }
}

.attr('checked’)を利用する

jQuery 1.5以下のバージョンで利用できます。

v1.6以上のバージョンでは非推奨となっています。

<p>
    <input type="checkbox" id="chkbx" name="chkbx" />Agree
</p>
<input type="button" value="Click" onclick="showTxt()"/>
<div id="txt" style="display:none">
  Show TXT
</div>

function showTxt () {
    if($("#chkbx").attr('checked')){
        $("#txt").show(); 
    }
    else {
        $("#txt").hide();
    }
}

ちなみに、jQueryのバージョンは、下記で確認可能です。

alert($.fn.jquery);

最後に

いかがでしたでしょうか。

checkboxのチェックされたかどうかの判定方法が色々ありますが、自身の環境にあった方法を選択してもらえると良いかと思います。

他にもjQueryのChangeイベントなどでも判定できます。

ぜひ、ご活用ください