jQuery - attiva selezionare tutte le caselle di controllo

Question

combattuto con un mucchio di esempi e, essendo ancora nuovo per jQuery/Javascript, non può ottenere il mio codice di funzionare (qui il mio il mio modello in SPG):

<table> 
    <thead> 
    <tr> 
     <th><input type="checkbox" name="selectAll" onclick="selectAll(this.checked);"/></th> 
    </tr> 
    </thead> 
    <tbody> 
     <td> 
      <td><input type="checkbox" name="domainList" value="${domainInstance.id}"/></td> 
    </tbody> 
<table> 

ho la seguente snippet JavaScript nella mia gsp principale, che chiama il modello:

function selectAll(status) { 

} 

Come faccio a selezionare tutte le caselle di controllo dal nome selectAll?

Answer 1

Dal momento che si sta utilizzando jQuery, è necessario utilizzare un gestore onclick come qui di seguito per selectAll.

$(':checkbox[name=selectAll]').click (function() { 
    $(':checkbox[name=domainList]').prop('checked', this.checked); 
}); 

prega di notare che il codice di cui sopra è andare a guardare in tutta la dom per la casella di controllo con name=selectAll e impostare lo stato della casella di controllo con name=domainList.

Qui di seguito è una versione leggermente migliore con il cambiamento di markup minore,

jsFiddle DEMO

$('#selectAllDomainList').click(function() { 
 
    var checkedStatus = this.checked; 
 
    $('#domainTable tbody tr').find('td:first :checkbox').each(function() { 
 
    $(this).prop('checked', checkedStatus); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<table id="domainTable"> 
 
    <!-- Added ID --> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <!-- Added ID to below select box --> 
 
     <input type="checkbox" name="selectAll" id="selectAllDomainList" /> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <table>

Answer 2

$("input:checkbox").prop("checked", status); 

Answer 3

per selezionare tutte le caselle con il nome = selectAll e sul suo stato attuale si può fare

function selectAll(status) { 
    $('input[name=selectAll]').each(function(){ 
     $(this).prop('checked', status); 
    }); 
}