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

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>