当另一个复选框被选中时，如何取消选中？

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>

我试过使用两个复选框，但当选中第二个复选框时，我无法取消选中#1。

下面是我使用两个复选框的示例：http://jsfiddle.net/3f66j30y/

我也试过用两个单选按钮，但在被检查后，我不想让它们不被检查。

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>

​

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

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>

​