選択済みのラジオボタンに対して、チェックボックスのように再度押すことで解除できるようにするJavaScriptのサンプル。
複数グループにも対応。
test.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>ラジオボタン 解除対応サンプル</title>
</head>
<body>
groupA:
<label><input type='radio' name='groupA' value='1'>1</label>
<label><input type='radio' name='groupA' value='2'>2</label>
<label><input type='radio' name='groupA' value='3'>3</label>
<br>
groupB:
<label><input type='radio' name='groupB' value='1'>1</label>
<label><input type='radio' name='groupB' value='2'>2</label>
<label><input type='radio' name='groupB' value='3'>3</label>
<br>
groupC:
<label><input type='radio' name='groupC' value='1'>1</label>
<label><input type='radio' name='groupC' value='2'>2</label>
<label><input type='radio' name='groupC' value='3'>3</label>
<br>
<script>
'use strict';
{
window.addEventListener('DOMContentLoaded', function() {
const
radioElements = document.querySelectorAll('input[type=radio]'),
state = {};
for(let i = 0; i < radioElements.length; ++i) {
radioElements[i].addEventListener('click', function() {
if(state[this.name] === this.value) state[this.name] = this.checked = false;
else state[this.name] = this.value;
});
}
});
}
</script>
</body>
</html>