选中另一个复选框时如何取消选中一个复选框？答案

【问题标题】：How to uncheck a checkbox when another one is checked?选中另一个复选框时如何取消选中一个复选框？
【发布时间】：2017-03-18 12:14:34
【问题描述】：

使用 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>

我尝试了两个复选框，但当 #2 被选中时，我无法取消选中 #1。

这是我的 Jsfiddle，带有两个复选框的示例： http://jsfiddle.net/3f66j30y/

我也尝试使用两个单选按钮，但在检查后我无法保持它们处于未选中状态。

【问题讨论】：

单选按钮需要选中组中的单选按钮，因此您不能同时取消选中
"我也希望这两个复选框在被选中后可以取消选中。" ?
@OusmaneMahyDiaw 我认为他的意思是他想要这 3 种可能的组合(on-off,off-on,off-off)
@NickA 好的，我现在看到了。
@NickA 当然，我看到了你更新的评论。

标签： javascript html checkbox

【解决方案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>

【讨论】：

感谢您的回答以及有关单选按钮的说明。
@Guillaume 不，如果可以避免的话，永远不要像这样将 JS 放入 HTML 中——这是维护的噩梦，而且很可能意味着你没有被 DRY
@mike 我大体上同意，但是对于 2 个按钮，我认为这很容易维护，并且通过不将其移动到函数中可以减少编写量。作为证据，将您的字节数与我的进行比较。
@NickA 我要戒掉糖了；）那个“从不”有点极端（有时它可能在有限的基础上是合适的），但我想我想打我见过很多管理不善且极难维护的代码。在用 ruby、php、perl 或 ASP 编写的遗留站点中尤其如此。在正文中嵌入了 JavaScript。
@mike 绝对，我永远不会在超过，好吧，甚至 3 或 4 个复选框中执行此操作，我会将其移出，但在此示例中使用 2，我认为它可以接受。

【解决方案2】：

Vanilla 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 是多么容易。

【讨论】：

【解决方案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>

【讨论】：

你不觉得包含 jQuery 有点矫枉过正吗？

【解决方案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>

【讨论】：