取消勾選複選框，如果其他選項使用javascript

我有兩個複選框字段。使用Javascript，我想確保只有一個複選框可以打勾。（例如，如果一個checkbox1被選中，如果checkbox2打勾，checkbox1會打鉤）取消勾選複選框，如果其他選項使用javascript

<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語句？

來源

2013-10-14 scott

也許正相反 - 兩個無線電和複選框下？ – VisioN

那麼，最好的方法就是使用單選按鈕。 – tymeJV

你爲什麼使用複選框而不是單選按鈕？ – peernohell

那麼你應該使用單選按鈕，但有些人喜歡複選框的外觀，所以這應該照顧它。我添加了一個共同的類對您的輸入：

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/

來源

2013-10-14 14:19:02 tymeJV

如果你喜歡複選框的外觀，你應該更好地覆蓋圖像的無線電。 – VisioN

非常感謝，正是我的意思。我特別想在這個例子中使用複選框。 – scott

希望這有助於：

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; 
    } 
}

來源

2013-10-14 14:25:45

<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; 
     } 
     } 
    } 
}

來源

2013-10-14 14:29:31 Kaf

也基於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的功能不會讓你同時擁有取消選中 - 這樣做。（是的，很奇怪，但真正的..有時是一個語義理由，爲什麼你想要兩個tickboxes不是單選按鈕）

來源

2015-02-13 18:14:18 anoldermark

取消勾選複選框，如果其他選項使用javascript

回答

相關問題