jQueryでラジオボタンのチェックの値の取得とチェックを外す方法【現役エンジニアが解説】
今回は、jQueryでラジオボタンのチェックの値の取得とチェックを外す方法について、簡単に解説していきます。
HTML
jQueryでのラジオボタンの操作は簡単です。
まず、今回のHTMLのサンプルを以下に示します。
<input type="radio" name="fruit" value="apple">りんご <input type="radio" name="fruit" value="grape">ぶどう <input type="radio" name="fruit" value="orange">みかん <input type="button" id="btnGet" value="取得"> <input type="button" id="btnUncheck" value="外す">
果物の選択肢が3つあり、取得ボタンでチェックされた値の取得、外すボタンでチェックを全て外す処理を実装する想定です。
チェックの値の取得
チェックの値の取得はセレクタで指定するだけです。
以下のようにラジオボタンのセレクタに:checkedを付けます。
$("#btnGet").click(function() {
console.log($('input:radio[name=fruit]:checked').val());
});
上記のコードでは、取得ボタン押下時にname属性の値がfruitのチェックされたラジオボタンの値を取得します。
チェックを外す
チェックを外す場合もセレクタで指定します。
要素を取得後は、propメソッドでcheckedプロパティをfalseに変えます。
$("#btnUncheck").click(function() {
$('input:radio[name=fruit]:checked').prop('checked',false);
});
上記のコードの例では、外すボタン押下時にラジオボタンのチェックを外します。