如果另一个复选框使用 javascript 选中，则取消选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19362284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncheck a checkbox if another checked with javascript
提问by scott
I have two checkbox fields. Using Javascript, I would like to make sure only one checkbox can be ticked. (e.g if one checkbox1 is ticked, if checkbox2 is ticked, checkbox1 will untick)
我有两个复选框字段。使用 Javascript，我想确保只能勾选一个复选框。（例如，如果一个 checkbox1 被勾选，如果 checkbox2 被勾选，则 checkbox1 将取消勾选）
<input name="fries" type="checkbox" disabled="disabled" id="opt1"/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled"/>
I would also like to have a radio button beneath, if this is clicked, I would like both checkboxes to be unticked.
我还想在下面有一个单选按钮，如果单击它，我希望两个复选框都被取消选中。
<input type="radio" name="o1" id="hotdog" onchange="setFries();"/>
Would the best way to do this be by writing a function, or could I use onclick statements?
最好的方法是编写一个函数，还是我可以使用 onclick 语句？
回答by tymeJV
Well you should use radio buttons, but some people like the look of checkboxes, so this should take care of it. I've added a common class to your inputs:
好吧，您应该使用单选按钮，但有些人喜欢复选框的外观，因此应该处理它。我在您的输入中添加了一个通用类：
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
回答by anoldermark
Also based on tymeJV's answer above, if you want to only deactivate the other checkbox when one is clicked you can do this:
同样基于上面 tymeJV 的回答，如果您只想在单击时停用另一个复选框，您可以执行以下操作：
function cbChange(obj) {
var instate=(obj.checked);
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
if(instate)obj.checked = true;
}
tymeJV's function does not let you have both unticked - this does. (yes, weird but true.. sometimes there's a semantic reason why you want two tickboxes not radio buttons)
tymeJV 的功能不会让您同时取消勾选 - 确实如此。（是的，很奇怪但确实如此......有时你想要两个复选框而不是单选按钮是有语义原因的）
回答by Ramesh Kotha
Hope this helps:
希望这可以帮助：
function setFries(){
var hotdog= document.getElementById("hotdog");
var opt1= document.getElementById("opt1");
var opt2 = document.getElementById("opt2");
if(hotdog.checked){
opt1.checked = false;
opt2.checked = false;
}else if(opt1.checked){
opt2.checked = false;
}else if(opt2.checked){
opt1.checked = false;
}
}
回答by Kaf
<input type="checkbox" name="fries" id="opt1" disabled="disabled" onclick="setFries(this);/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled" onclick="setFries(this);/>
<input type="radio" name="o1" id="hotdog" onclick="setFries(this);"/>
Note that I am using onclick event:
请注意，我正在使用 onclick 事件：
function setFries(obj){
var fries = document.getElementsByName('fries');
if(obj.id =='hotdog') //Or check for obj.type == 'radio'
{
for(var i=0; i<fries.length; i++)
fries[i].checked = true;
}
else{
for(var i=0; i<fries.length; i++){
if(fries[i].id != obj.id){
fries[i].checked = !obj.checked;
break;
}
}
}
}
回答by user11020861
The simplest way I found for this was to not use any sort of code at all. I triggered an actions in the check box properties. 1. mouse up to reset a form. I then unselected (for reset) all of my fields accept for my desired check boxes. I then did the same thing for my other check box to go the other way. You can basically turn the check boxes into toggles or have any sort of crazy pattern you want.
我为此找到的最简单的方法是根本不使用任何类型的代码。我在复选框属性中触发了一个操作。1. 鼠标向上重置表格。然后我取消选择（重置）我所有的字段都接受我想要的复选框。然后我对我的另一个复选框做了同样的事情，让它走另一条路。您基本上可以将复选框转换为开关或拥有任何您想要的疯狂模式。
