基于ID的Javascript检查/取消选中复选框

Question

我有很多服务器输入复选框。我给了第一个复选框ID all。默认情况下它会被检查。当用户选中其他复选框时，则ID为all的复选框将被取消选中。如果all被选中，其他复选框将被取消选中。为了做到这一点，我做了代码，但没有发生任何事情。

这是我试过的。

<form> 
<input type="checkbox" id="all" value="all" name="all" onChange="check()" checked/>ALL <br/> 
<input type="checkbox" id="servers" value="xampp" name="server[]" onChange="check()" />XAMPP <br/> 
<input type="checkbox" id="servers" value="wamp" name="server[]" onChange="check()" />WAMP <br/> 
<input type="checkbox" id="servers" value="mamp" name="server[]" onChange="check()" />MAMP <br/> 
<input type="checkbox" id="servers" value="amp" name="server[]" onChange="check()" />AMP <br/> 
</form> 


function check(){ 
    var all = document.getElementById("all"), 
     group = document.getElementById("servers"); 
    if(all.checked == true){ 
     group.checked == false; 
    }elseif(group.checked == true){ 
     all.checked == false; 
    } 
} 

我想让我的代码像THIS一样工作。

我不想使用jQuery出于某些原因。所以我需要我的代码在纯JS中。

任何帮助将不胜感激。

Answer 1

您不能在多个元素上使用相同的ID。

试试这个，注意我是如何放置的复选框在div

这是工作：http://jsfiddle.net/Sa2d3/

HTML：

<form> 
    <div id="checkboxes"> 
     <input type="checkbox" id="all" value="all" name="all" onChange="check()" />ALL <br/> 
     <input type="checkbox" value="xampp" name="server[]" onChange="check()" />XAMPP <br/> 
     <input type="checkbox" value="wamp" name="server[]" onChange="check()" />WAMP <br/> 
     <input type="checkbox" value="mamp" name="server[]" onChange="check()" />MAMP <br/> 
     <input type="checkbox" value="amp" name="server[]" onChange="check()" />AMP <br/> 
    </div> 
</form> 

的JavaScript：

document.getElementById('checkboxes').addEventListener('change', function(e) { 
    var el = e.target; 
    var inputs = document.getElementById('checkboxes').getElementsByTagName('input'); 

    // If 'all' was clicked 
    if (el.id === 'all') { 

     // loop through all the inputs, skipping the first one 
     for (var i = 1, input; input = inputs[i++];) { 

      // Set each input's value to 'all'. 
      input.checked = el.checked; 
     } 
    } 

    // We need to check if all checkboxes have been checked 
    else { 
     var numChecked = 0; 

     for (var i = 1, input; input = inputs[i++];) { 
      if (input.checked) { 
       numChecked++; 
      } 
     } 

     // If all checkboxes have been checked, then check 'all' as well 
     inputs[0].checked = numChecked === inputs.length - 1; 
    } 
}, false); 

编辑：

基于在这里评论你的要求是更新的javascript： http://jsfiddle.net/T5Pm7/

document.getElementById('checkboxes').addEventListener('change', function(e) { 
    var el = e.target; 
    var inputs = document.getElementById('checkboxes').getElementsByTagName('input'); 

    // If 'all' was clicked 
    if (el.id === 'all') { 

     // If 'all' is checked 
     if (el.checked) { 

      // Loop through the other inputs and removed the check 
      for (var i = 1, input; input = inputs[i++];) { 
       input.checked = false; 
      } 
     } 
    } 

    // If another has been clicked, remove the check from 'all' 
    else { 
     inputs[0].checked = false; 
    } 
}, false); 

Answer 2

您只能将相同的id分配给一个元素。你想要做的是给他们一个class="servers"，然后在你的JavaScript中使用document.getElementsByClassName("servers");。

Answer 3

你不能有多个HTML元素相同的ID。你可以做这样的事情来达到你所要求的。

<form> 
<input type="checkbox" id="all" value="all" name="all" onChange="check(this, 'a')" checked/>ALL <br/> 
<input type="checkbox" id="servers1" value="xampp" name="server[]" onChange="check(this, 's')" />XAMPP <br/> 
<input type="checkbox" id="servers2" value="wamp" name="server[]" onChange="check(this, 's')" />WAMP <br/> 
<input type="checkbox" id="servers3" value="mamp" name="server[]" onChange="check(this, 's')" />MAMP <br/> 
<input type="checkbox" id="servers4" value="amp" name="server[]" onChange="check(this, 's')" />AMP <br/> 
</form> 

<script> 
function check(cb, type){ 
    var all = document.getElementById("all"); 

    if (type == "a" && cb.checked){ 
     var els = document.getElementsByName("server[]"); 
     for(var i = 0; i < els.length; ++i) 
      els[i].checked = false; 
    } else if(type == "s" && cb.checked) { 
     all.checked = false; 
    } 
} 
</script> 

Answer 4

把这个功能

function jvcheck(id,Vale){ 
Checkboxesclass = '.group'+id; 
$(Checkboxesclass).each(function() { 
    this.checked = Vale; 
}); 

} 

，然后把这个代码在主复选框

jvcheck('group222',this.checked); 

所有复选框带班group222现在检查。