[英]Uncheck a checkbox if another checked with javascript
我有兩個復選框字段。 我想使用Javascript來確保只勾選一個復選框。 (例如,如果勾選了一個checkbox1,如果勾選了checkbox2,則checkbox1將取消勾選)
<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);"/>
請注意,我正在使用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;
}
}
}
}
我為此找到的最簡單的方法是根本不使用任何類型的代碼。 我在復選框屬性中觸發了操作。 1.向上移動鼠標以重置表格。 然后,我未選中(用於重置)我的所有字段都接受我想要的復選框。 然后,我對其他復選框執行了同樣的操作,使之反方向執行。 您基本上可以將復選框變成切換按鈕,或者具有您想要的任何瘋狂模式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.