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>

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

这是我的Jsfiddle，带有两个复选框的示例： 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

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

Answer 3

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

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

4 个答案: