[英]How to uncheck a checkbox when another one is checked?
With Javascript, I would like one first checkbox to get unchecked when I check the second one. 使用Javascript,我想在检查第二个复选框时取消选中第一个复选框。 I also would like that the two checkboxes can be unchecked after having been checked.
我还希望在选中后可以取消选中这两个复选框。
Here is my HTML code : 这是我的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>
I tried with two checkboxes, but I don't manage to uncheck #1 when #2 is checked. 我尝试了两个复选框,但是当选中#2时,我无法取消选中#1。
Here is my Jsfiddle with the example with two checkboxes: http://jsfiddle.net/3f66j30y/ 这是我的Jsfiddle,带有两个复选框的示例: http : //jsfiddle.net/3f66j30y/
I also tried with two radio buttons, but I don't manage to remain them unchecked after having been checked. 我也尝试过两个单选按钮,但是经过检查后我无法保持未选中状态。
Add an onclick
event to each checkbox to uncheck the other checkbox 向每个复选框添加
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>
Use jQuery
to achieve this. 使用
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>
The following in a Vanilla JS solution, which: 以下是Vanilla JS解决方案,其中:
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>
It can certainly be improved; 它当然可以改善; after all, one obvious point is that you're searching the DOM for the checkboxes every time they change — you could easily cache them.
毕竟,一个明显的观点是,每次更改时,您都会在DOM中搜索复选框 - 您可以轻松地缓存它们。 However, this should serve a point and show you how easy it is to work with standard JS.
但是,这应该是一个重点,并向您展示使用标准JS是多么容易。
Behavior you are looking for is specific to radio buttons. 您正在寻找的行为特定于单选按钮。 However the problem is - you can't uncheck it, once checked.
但问题是 - 一旦检查,你无法取消选中它。 In this case you can use three radio buttons - yes, no and none (-) - since clearly you want more then two options:
在这种情况下,你可以使用三个单选按钮 - 是,否和没有( - ) - 因为很明显你需要两个以上的选项:
<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>
If you prefer to stick with two, you can use your checkboxes with a bit of JavaScript to switch the opposite box off: 如果你喜欢坚持使用两个,你可以使用带有一点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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.