JavaScript/jQueryでラジオボタンのチェックを外します
この投稿では、JavaScriptとjQueryでラジオボタンのチェックを外す方法について説明します。
1.jQueryの使用
The :checked CSS疑似クラスセレクタは任意の無線を表します(<input type="radio">)チェックされる要素。アイデアは、 :checked 選択したラジオボタンを識別して設定を解除するセレクター。
jQuery
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $("input:radio[name=language]:checked")[0].checked = false; }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="container"> <p>Select your favorite programming language:</p> <div> <input type="radio" id="java" name="language" value="java" チェック済み> <label for="java">Java</label> <input type="radio" id="cpp" name="language" value="cpp"> <label for="cpp">C++</label> <input type="radio" name="language" value="python"> <label for="python">Python</label> </div> <button id="submit">Submit</button> </div> |
または、 .prop() 以下に示すように、一致した無線要素の値を設定解除する方法：
jQuery
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $("input[type=radio][name=language]").prop('checked', false); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="container"> <p>Select your favorite programming language:</p> <div> <input type="radio" id="java" name="language" value="java" チェック済み> <label for="java">Java</label> <input type="radio" id="cpp" name="language" value="cpp"> <label for="cpp">C++</label> <input type="radio" name="language" value="python"> <label for="python">Python</label> </div> <button id="submit">Submit</button> </div> |
2.JavaScriptを使用する
プレーンJavaScriptでは、 querySelector() 選択したラジオボタンを返し、そのチェック済みプロパティをfalseに設定するメソッド。
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { var radio = document.querySelector('input[type=radio][name=language]:checked'); radio.checked = false; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="container"> <p>Select your favorite programming language:</p> <div> <input type="radio" id="java" name="language" value="java" チェック済み> <label for="java">Java</label> <input type="radio" id="cpp" name="language" value="cpp"> <label for="cpp">C++</label> <input type="radio" name="language" value="python"> <label for="python">Python</label> </div> <button id="submit">Submit</button> </div> |
これで、JavaScriptとjQueryのラジオボタンのチェックを外すことができます。
こちらも参照: