普通、ラジオボタンはチェックすることはできてもチェックを消すことはできません。
しかし、JavaScriptを書き加えてあげることで、ラジオボタンのチェックを消すことができます。
今回は、**「選択解除用のボタンを設置する場合」と「ラジオボタンをそのまま押して解除できるようにする場合」**の２つの方法をつくります。
選択解除用のボタンを設置する場合
3つのラジオボタンのうち、どれかを選択できるようにします。
また、ラジオボタンの選択解除用のボタンも用意しておきます。
HTMLでの記述
index.html
<input type="radio" id="radio1" name="radio">イヌ
<input type="radio" id="radio2" name="radio">ネコ
<input type="radio" id="radio3" name="radio">ウサギ
<button type="button" onclick="radioDeselection()">選択解除</button>
@htsign さんからのご指摘によりname名追加
ラジオボタンのid名は、radioにします。
ラジオボタンのid名はそれぞれ定義し、name名は、radioにします。
そして、選択を解除するためのボタンを設置します。
JavaScriptでの記述
form.js
function radioDeselection() {
for (const element of document.getElementsByName('radio')) {
element.checked = false;
}
}
ラジオボタンのid名であるradioを指定して、チェックがしてあるラジオボタンを解除しています。
ラジオボタンのname名であるradioを指定して、チェックがしてあるラジオボタンを解除しています。
ラジオボタンをそのまま押して解除できるようにする場合
次に、ラジオボタンを押すだけで選択を解除できるようにします。
HTMLでの記述
index.html
<input type="radio" value="1" onclick="radioDeselection(this, 1)">東京
<input type="radio" value="2" onclick="radioDeselection(this, 2)">大阪
<input type="radio" value="3" onclick="radioDeselection(this, 3)">名古屋
radioDeselectionの引数には、ラジオボタンである<input>要素と、それぞれのラジオボタンを識別するための数字を入れます。
JavaScriptでの記述
form.js
var remove = 0;
function radioDeselection(already, numeric) {
if(remove == numeric) {
already.checked = false;
remove = 0;
} else {
remove = numeric;
}
}
はじめにチェックされたラジオボタンを確認するための変数removeを定義します。
そして、押されたラジオボタンがチェック済みならばチェックを外し、チェックされてなかったらスルーしてラジオボタンにはチェックされます。