如何在选中另一个复选框时取消选择一个复选框？

Question

使用 JavaScript，当我选中第二个复选框时，希望第一个复选框取消选中。我还希望两个复选框在被选中后可以取消选中。

以下是我的 HTML 代码:

<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>

我尝试使用两个复选框，但是当选择第二个时无法取消第一个。

这是我的Jsfiddle示例，其中包含两个复选框： http://jsfiddle.net/3f66j30y/

我还尝试了两个单选按钮，但是在选中后无法保持未选中状态。

- Guillaume

---

单选按钮要求在组中必须有一个单选按钮被选中，因此您不能取消两个。 - Nick stands with Ukraine

我也希望在选中后可以取消选中这两个复选框。 - Ousmane D.

@OusmaneMahyDiaw 我认为他的意思是他想要这三种可能的组合(on-off,off-on,off-off)。 - Nick stands with Ukraine

@NickA 好的，我现在明白了。 - Ousmane D.

@NickA 确定，我看到了你的更新评论。 - Ousmane D.

也许你可以添加第三个单选按钮“-”或“(无)”？并将其设置为默认选择？你知道 - 在HTML中只需一行或在CSS + JS中需要> 20行。 - rsm

Answer 1

为每个复选框添加一个 onclick 事件以取消勾选其他复选框。

input[type="checkbox"] {
display:none;
}
 
input[type="checkbox"] + label
{
padding:10px 10px;
text-align:center;
background:#dedede;
color:black;
height: 20px;
width: 100px;
display:inline-block;
}
input[type="checkbox"]:checked + label
{
padding:10px 10px;
text-align:center;
background:green;
color:white;
height: 20px;
width: 100px;
display:inline-block;
}

<input type="checkbox" id="radio-1" class="radio" onclick="document.getElementById('radio-2').checked = false"/><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" onclick="document.getElementById('radio-1').checked = false"/><label for="radio-2">No</label>

- Nick stands with Ukraine

---

感谢您的答复以及关于单选按钮的说明。 - Guillaume

@Guillaume 不要把JS放在HTML中，如果可以避免的话——这是一个维护噩梦，很可能意味着你没有DRY。 - user7699053

@mike 我基本上同意，但在两个按钮的情况下，我认为这很容易维护，并且通过不将其移动到函数中，您可以减少编写量。作为证明，请比较您的字节计数和我的字节计数。 - Nick stands with Ukraine

@NickA 我刚刚度过了一次糖分高峰 ;) 那个“从不”有点极端（在有限的情况下可能是适当的时候），但我想强调的是，我见过很多管理不善的代码，这些代码非常难以维护。特别是在使用嵌入式JavaScript的ruby、php、perl或ASP编写的遗留网站中，这一点尤为明显。 - user7699053

@mike 当然，我绝不会在任何比这更多的东西中这样做，即使有3或4个复选框，我也会将其移出，但在这个例子中有2个，我认为这是可以接受的。 - Nick stands with Ukraine

Answer 2

以下是一个使用纯JS实现的解决方案，它具有以下特点：

• 在DOM加载时绑定更改事件
• 仅将一个更改事件绑定到父容器
• 在更改事件中，确定目标并关闭其他复选框

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.select-group').onchange = changeEventHandler;
}, false);

function changeEventHandler(e) {
  var cbs = document.querySelectorAll('.cb');
  cbs.forEach(function(cb) {
    if (cb != e.target)
      cb.checked = false;
  });
}

input[type="checkbox"] {
  display: none;
}

label {
  padding: 10px 10px;
  text-align: center;
  background: #dedede;
  color: black;
  height: 20px;
  width: 100px;
  display: inline-block;
}

input[type="checkbox"]:checked+label {
  padding: 10px 10px;
  text-align: center;
  background: green;
  color: white;
  height: 20px;
  width: 100px;
  display: inline-block;
}

<div class="select-group">
  <input id="cb_yes" type="checkbox" value="yes" class="cb" />
  <label for="cb_yes">Yes</label>
  <input id="cb_no" type="checkbox" value="no" class="cb" />
  <label for="cb_no">No</label>
</div>

这段代码肯定可以改进；显然，其中一个明显的问题是每次复选框变化时都需要搜索DOM - 你很容易就能缓存它们。然而，这应该说明使用标准JS有多么容易。

- user7699053

Answer 3

使用jQuery来实现此功能。

$(".radio").change(function() {
    var checked = $(this).is(':checked');
    $(".radio").prop('checked',false);
    if(checked) {
        $(this).prop('checked',true);
    }
});

input[type="checkbox"] {
display:none;
}
 
input[type="checkbox"] + label
{
padding:10px 10px;
text-align:center;
background:#dedede;
color:black;
height: 20px;
width: 100px;
display:inline-block;
}
input[type="checkbox"]:checked + label
{
padding:10px 10px;
text-align:center;
background:green;
color:white;
height: 20px;
width: 100px;
display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>

- AG_

---

你觉得为这个包含jQuery有点过头了吗？ - Nick stands with Ukraine

Answer 4

您要查找的行为是特定于单选按钮的。但问题在于，一旦选中，您无法取消选中。在这种情况下，您可以使用三个单选按钮 - 是、否和无（-），因为显然您希望有更多的选项：

<input type="radio" id="radio-0" name="group-one" class="radio" checked /><label for="radio-0">-</label><br>
<input type="radio" id="radio-1" name="group-one" class="radio" /><label for="radio-1">Yes</label><br>
<input type="radio" id="radio-2" name="group-one" class="radio" /><label for="radio-2">No</label>

如果您更喜欢使用两个复选框，您可以使用一些JavaScript代码来关闭相反的框：

function radioSwitch(opposite) {
    document.getElementById(opposite).checked = false;
}
document.getElementById("radio-1").addEventListener("click",
    function() { radioSwitch("radio-2"); });
document.getElementById("radio-2").addEventListener("click",
    function() { radioSwitch("radio-1"); });

<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>

- rsm