JQuery associare evento click di caselle di controllo

Ecco una vista di base di ciò che il mio html, assomiglia a questo:

<form>
  <div id="part1">
     //some html form elements including checkboxes
  </div>
  <div id="part2">
    //more html code with more checkboxes
  </div>
  <div id=part2">
     //data table with numerous checkboxes built dynamically
  </div
</form>

Quello che devo fare è associare il .click() evento per le caselle di controllo nella parte 1, 2, e 3 separatamente. Ho provato questo $('#part1:checkbox').click(...) ma che non ha funzionato. Se io uso $("form :checkbox").click(...) stesso evento click è associato a tutte le caselle di controllo e non è solo un set. Come faccio a separare questi?

InformationsquelleAutor iJared | 2012-06-27



Tags: ,

4 Replies
  1. 19

    Ci siamo quasi. Hai solo bisogno di uno spazio per separare i discendenti di selezione:

    $('#part1 :checkbox').click(function(){
    //code goes here
});

    Per aumentare le prestazioni, si potrebbe desiderare di utilizzare questo:

    $('#part1 input[type=checkbox]').click(function(){
    //code goes here
});
    • ugh.. la differenza di spazio fa mahalos
    • come si fa a usare input[type=checkbox] migliorare le prestazioni?
    • è un valido selettore CSS. Quando possibile, jQuery passerà il selettore insieme a querySelectorAll, che è molto più efficiente di jQuery propria implementazione di :checkbox.
    • e come ottenere il testo della casella di controllo è selezionata ?
    InformationsquelleAutor Joseph Silber
  2. 1

    O si dà nome della classe stessa per tutte le caselle di controllo e dare il corrispondente div ID per la casella di controllo anche, in modo che è possibile utilizzare il codice riportato di seguito,

    <input type="checkbox" class="checkall" id="part1">Part 1

    e il tuo script va come questa.

    $('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});
    InformationsquelleAutor user3512003
  3. 1

    Ho avuto un problema simile, e questo StackOverflow pagina è la prima risposta mi sono imbattuto su, ma non era davvero soddisfatto. Ho trovato questo articolo https://www.kevinleary.net/jquery-checkbox-checked/ una soluzione migliore.

    $('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});
    InformationsquelleAutor Craig London

Lascia un commento