jQueryでチェックボックスの値の取得とチェックを外す方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでチェックボックスの値の取得とチェックを外す方法について、簡単に解説していきます。

HTML

jQueryではチェックボックスの値の取得が楽にできます。

また、チェックボックスのチェックを外すことも容易に可能です。

<p><input type="checkbox" name="fruit" value="apple">りんご</p>
<p><input type="checkbox" name="fruit" value="grape">ぶどう</p>
<p><input type="checkbox" name="fruit" value="orange">みかん</p>
<p><input type="button" id="btnGet" value="取得"></p>
<p><input type="button" id="btnUncheck" value="外す"></p>

今回は、上記のHTMLで、3つのチェックボックスと取得ボタン、外すボタンがあることを想定します。

チェックの値の取得

チェックされている要素はセレクタで取得できます。

それをeachメソッドで回して、値の取得と任意の処理が可能です。

$("#btnGet").click(function () {
  $(':checkbox[name=fruit]:checked').each(function () {
    console.log($(this).val());
  });
});

上記のコードでは、取得ボタン押下時に、チェック項目の値をコンソールにログ出力しています。

チェックを外す

チェックを外す場合も、まず、セレクタで指定します。

その後でremoveAttrメソッドとpropメソッド、changeメソッドを使います。

$("#btnUncheck").click(function () {
  $(':checkbox[name=fruit]:checked').removeAttr('checked').prop('checked', false).change();
});

上記のコードの例では、外すボタン押下時に、全てのチェックボックスのチェックを外しています。