为什么第一个复选框有效但第二个无效？

Question

为什么第一个复选框有效但第二个无效，我做错了什么？ :S

 <meta http-equiv="Content-type" value="text/html; charset=UTF-8" />

 <script type="text/javascript" language="javascript">
 function SetAllCheckBoxes(FormName, AreaID)
 {

 if(!document.forms[FormName])
 return;
 var objCheckBoxes = document.getElementById(AreaID).getElementsByTagName('input');
 if(!objCheckBoxes)
 return;
 var countCheckBoxes = objCheckBoxes.length;
 if(!countCheckBoxes)
 objCheckBoxes.checked = CheckValue;
 else
 for(var i = 0; i < countCheckBoxes; i++)
 objCheckBoxes[i].checked = false;
 }
 </script>


 </head>

 <div id="items">
  <input name="checkall" type="checkbox" onclick="SetAllCheckBoxes('SelectedItems','items');"><br>
 <form name="SelectedItems" action="" method="post">
 <b>Select/Unselect All</b><br>


 <input id="idGSSmodules" type="checkbox" name="GSS" >
 <label for="idmodules">GSS</label><br>
 <input type="checkbox" name="GTS" id="idGSSmodules">
 <label for="idmodules">GSS</label>
 <br>

 </div>

 <div id="itemss">
  <input name="checkall" type="checkbox" onclick="SetAllCheckBoxes('SelectedItemss','itemss');"><br>
 <form name="SelectedItemss" action="" method="post">
 <b>Select/Unselect All</b><br>


 <input id="idGSSmodules" type="checkbox" name="GSS" >
 <label for="idmodules">GSS</label><br>
 <input type="checkbox" name="GTS" id="idGSSmodules">
 <label for="idmodules">GSS</label>
 <br>

 </div>

 </form>

 </body>
 </html>

编辑* * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** *

如何调用表单上的方法 SetAllCheckBoxes(FormName, AreaID); 换句话说，我想在不使用复选框的情况下调用 function？

试过这个，但是我不能改变复选框的值

 function unCheckBoxes(FormName, AreaID) {
     if(!document.forms[FormName])
     return;
     var objCheckBoxes = document.getElementById(AreaID).getElementsByTagName('input');
     if(!objCheckBoxes)
     return;
     var countCheckBoxes = objCheckBoxes.length;

     for(var i = 0; i < countCheckBoxes; i++)
     objCheckBoxes[i].checked = false;
 }
 function checkCheckBoxes(FormName, AreaID){
     if(!document.forms[FormName])
     return;
     var objCheckBoxes = document.getElementById(AreaID).getElementsByTagName('input');
     if(!objCheckBoxes)
     return;
     var countCheckBoxes = objCheckBoxes.length;


     for(var i = 0; i < countCheckBoxes; i++)
     objCheckBoxes[i].checked = true;
 }
checkCheckBoxes('locForm','locCheckboxes');

Answer 1

输入元素中的复选框只有选中的属性，使用它，页面上的所有复选框都将设置为与单击的复选框相同的值。

function setAllOtherCheckboxes(checkAllbox)
{
    var objCheckBoxes = document.getElementsByTagName('input');

    var chkBox = 0;
    for (chkBox in objCheckBoxes)
    {
        objCheckBoxes[chkBox].checked = checkAllbox.checked;            
    }       
}     

并在您的代码中：

<input type="checkbox" name="All" value="on"" onclick="setAllOtherCheckboxes(this);">Alles<br>

Answer 2

您的两个复选框具有相同的id ，这是真正的唯一标识符（不是name ）。 浏览器拒绝识别具有相同 id 的两个对象。

将您的代码更改为：

<input id="GSS" type="checkbox" name="GSS">
<label for="GSS">GSS</label><br/>
<input type="checkbox" name="GTS" id="GTS">
<label for="GTS">GSS</label> 

编辑：您还需要将第二组复选框重命名为唯一名称。 页面上的每个id必须是唯一的。