JavaScript啓用點擊複選框，並一次只選擇一個

我動態生成與像chkBox100等id和onClick函數複選框。JavaScript啓用點擊複選框，並一次只選擇一個

我想要做的就是

只有一次選擇一個複選框。
如果選中前一個複選框，並選中另一個複選框，請選中前一個複選框。
如果我點擊所選的複選框，它應該忽略它。

我想要在沒有jQuery或任何其他庫的標準JavaScript中做到這一點。

請幫助你的幫助，將不勝感激。這是我的代碼到目前爲止。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title> New Document </title> 

    <script type="text/javascript"> 

     function toggle(chkBox) 
     { 
     if (chkBox.checked) 
     { 
      chkBox.checked = false; 
     } 
     else 
     { 
      chkBox.checked = true; 
     } 

     // only select one at a time. 
     } 
    </script> 
    </head> 

    <body> 
    <form id="myForm" name="myForm"> 
     <input type="checkbox" id="chkBox100" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox121" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox1180" onClick="toggle(this);"> 
    </form> 
    </body> 
</html>

來源

2011-12-15 Nomad

爲什麼不使用單選按鈕？ – gereeter 2011-12-15 02:50:37

我同意@gereeter。也許添加一個「無」選項來取消選擇其他的。 – 2011-12-15 02:53:56

此外，表單控件必須具有名稱屬性，否則它們不能成功，並且在提交表單時不會包含它。 – RobG 2011-12-15 03:00:17

沒有使用庫，我想你可以做以下事情，如果我正確理解你的話，它似乎工作。

Fiddle

來源

2011-12-15 03:02:13 mreyeros

您是否考慮過使用單選按鈕和默認選中按鈕，該按鈕實際上是「無選擇」選項？沒有JavaScript要求。

<input type="radio" name="rb" value="zero">Zero 
<br> 
<input type="radio" name="rb" value="one">One 
<br> 
<input type="radio" name="rb" value="two">Two 
<br> 
<input type="radio" name="rb" value="None" checked>None of the above

來源

2011-12-15 02:55:10 RobG

感謝您的幫助和時間。 – Nomad 2011-12-29 23:05:06

您缺少的代碼是將取消選擇其餘的代碼。爲此，您應該首先獲取所有複選框的列表，並取消選中所有複選框。然後，選擇用戶點擊的那個。

function toggle(chkBox) { 
    checkboxes = document.getElementById("myForm").childNodes; 
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand. 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].checked = false; //clear all of them 
    } 
    if (isChecked) { 
     chkBox.checked = true; //if the original one wasn't checked, check it 
    } 
}

到這樣的替代方法是使用單選按鈕，它會自動有你想要的前兩個屬性，但不是第三，雖然你能解決這個像RobG說，另一種選擇說「的無以上。」

來源

2011-12-15 02:57:42 gereeter

JavaScript啓用點擊複選框，並一次只選擇一個

回答

相關問題