如果另一个复选框使用 javascript 选中,请取消选中另一个复选框
Uncheck a checkbox if another checked with javascript
>我有两个复选框字段。使用Javascript,我想确保只能勾选一个复选框。(例如,如果勾选了一个复选框1,如果勾选了复选框2,则复选框1将取消选中)
<input name="fries" type="checkbox" disabled="disabled" id="opt1"/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled"/>
我还想在下面有一个单选按钮,如果单击它,我希望两个复选框都被取消选中。
<input type="radio" name="o1" id="hotdog" onchange="setFries();"/>
最好的方法是编写一个函数,还是可以使用 onclick 语句?
好吧,您应该使用单选按钮,但有些人喜欢复选框的外观,因此应该可以处理它。我在您的输入中添加了一个通用类:
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
演示:http://jsfiddle.net/5uUjj/
同样基于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 的功能不允许你同时取消勾选 - 这确实如此。(是的,奇怪但真实......有时有一个语义原因,为什么你想要两个复选框而不是单选按钮)
希望这有帮助:
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;
}
}
<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);"/>
请注意,我正在使用点击事件:
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;
}
}
}
}
我为此找到的最简单方法是根本不使用任何类型的代码。 我在复选框属性中触发了操作。1. 向上鼠标以重置表单。 然后,我取消选中(用于重置)我的所有字段接受我想要的复选框。 然后,我对另一个复选框执行了相同的操作,使其转到另一条路。 您基本上可以将复选框变成切换开关或具有您想要的任何疯狂模式。
相关文章:
- 我有多个复选框,并希望为其中 2 个制定规则,以便如果我选择 1 个,则无法选择另一个
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 在mvc4中选择另一个复选框时禁用复选框
- 导航到另一个页面后,复选框状态会更改
- 禁用选择/复选框 当选择/选中另一个时
- jqGrid-当我点击网格中的另一个复选框时,选中多选复选框
- 嗨,我正试图将我的movieprice数组从复选框值传递给另一个计算选择总数的函数,但我的代码没有;t运行
- (php/jquery)根据另一个选中的复选框值隐藏和显示复选框
- 复选框将如何通过javascript触发html中的另一个输入元素
- 当选中另一个复选框时,如何取消选中该复选框
- 使用字段值填充提交时的另一个复选框
- 是否可以让一个复选框包含一个函数
- Jquery复选框影响一个项目而不是所有项目
- 向每个复选框添加一个eventListener
- jquery从另一个复选框控制一个复选复选框
- 根据选中的复选框返回一个字符串
- 函数Javascript的复选框在一个asp:表
- Javascript复选框:使用一个按钮将一个组更改为checked
- 如何为每个复选框分配一个唯一的id
- 通过单击复选框将一个文本框中的数据复制到另一个文本框中