1. ホーム
  2. javascript

[解決済み] ラジオボタンをクリックするとチェックが外れるようにするには?

2023-01-01 04:24:23

質問

チェックボックスと違い、ラジオボタンは一度クリックすると選択解除ができません。 Javascriptを使用してプログラム的に切り替えることができる方法はありますか? これは、できればjQueryを使用しないでください。

どのように解決するのですか?

HTMLオブジェクトのプロパティである checkedfalse のようにします。

document.getElementById('desiredInput').checked = false;


Plain JavaScript :

var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i++ ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}
<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

jQuery :

$('input').click(function(e){
    if (e.ctrlKey || e.metaKey) {
        $(this).prop('checked', false);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

押さえる Ctrl ( on mac)キーでチェックが外れます。