Javascript check/deseleziona caselle di controllo in base all'id

Question

Ho molte caselle di controllo per l'input del server. Ho dato la prima casella di controllo l'id all. Di default verrà controllato. Quando l'utente controlla le altre caselle di controllo, la casella di controllo con ID all verrà deselezionata. E se all è selezionato, le altre caselle di controllo saranno deselezionate. Perché ciò accada ho fatto il codice ma non sta succedendo nulla.

Ecco cosa ho provato.

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

Volevo che il mio codice funzionasse come THIS.

Non voglio usare jQuery per alcuni motivi. Quindi ho bisogno che il mio codice sia in puro JS.

Qualsiasi aiuto sarà apprezzato.

Answer 1

Non è possibile utilizzare lo stesso ID su più elementi.

Prova questo, si noti come ho messo le caselle di controllo in una div

Qui si sta lavorando: 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); 

EDIT :

Sulla base della sua richiesta, nel commento qui è il javascript aggiornamento: 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

È possibile assegnare lo stesso ID solo a un elemento. Quello che vuoi fare è dare loro un class="servers" e quindi usare document.getElementsByClassName("servers"); nel tuo JavaScript.

Answer 3

Non si può avere lo stesso ID per più elementi HTML. Potresti fare qualcosa del genere per ottenere ciò che stai chiedendo.

<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

put questa funzione

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

} 

e poi inserire questo codice nella tua casella principale

jvcheck('group222',this.checked); 

tutte casella con classe group222 ora controllato.