单选按钮 onclick return false 从另一个单选按钮中删除选中

Question

我有单选按钮。我想要单选按钮上的onClick 它会返回false。发生的事情是我更换的收音机没有经过检查，而且很好。但之前检查过的另一个单选按钮。也没有检查。 这里是代码：

function disableClick(e) {
  e.preventDefault();
  return false;
}

<input id="fmale" type="radio" name="gender" value="1" checked="checked" onclick="return disableClick(event);">
<input id="male" type="radio" name="gender" value="2" onclick="return disableClick(event);">

Answer 1

addEventListener 可以帮到你

function disableClick(e) {
    e.target.checked = false; // clear current radio button
    e.preventDefault();
    return false;
}
document.getElementById("fmale").addEventListener("click",disableClick)
document.getElementById("male").addEventListener("click",disableClick)

<input id="fmale" type="radio" name="gender" value="1" checked="checked" />
<input id="male" type="radio" name="gender" value="2">

Answer 2

'e.preventDefault()' 和 'return false' 阻止下一个单选按钮被选中。

Answer 3

e.preventDefault 不会阻止将单选按钮的属性checked 设置为true。您可以console.log(e.target.checked) 看到它已设置为true，即使e.preventDefault() 阻止它在视觉上显示为已选中。

下面的演示允许将另一个单选按钮自动设置为checked = false，然后将当前单击的单选按钮也设置为false。

我不知道你为什么要这样做，但你去吧

解决方案

$('#fmale').click(function(e) {
  e.target.checked = false;
});

$('#male').click(function(e) {
  e.target.checked = false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fmale" type="radio" name="gender" value="1" checked="checked">
<input id="male" type="radio" name="gender" value="2">