基於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現在檢查。