Domanda

Ho problemi a ottenere una funzione che faccia clic su tutte le caselle di controllo corrispondenti alla ricerca.L'evento click sembra attivarsi, ma nessuna casella di controllo viene selezionata né viene chiamato myFunc().

Funziona perfettamente quando si fa clic manualmente su ciascuna casella di controllo, ma chi vuole farlo con più di 40 caselle di controllo, non i miei utenti.
Potresti chiederti perché utilizzo un div-onclick invece che direttamente sulla casella di input.Questo perché voglio offrire ai miei utenti un file più grandi un'area su cui fare clic rispetto a una piccola casella di controllo.

Desidero fornire ai miei utenti un singolo collegamento ipertestuale per selezionare più caselle di controllo che corrispondono a determinati valori di attributo.

Ho bisogno di una soluzione rapida perché non ho tempo.

HTML

<div id="container">
<a href="#" onclick="clickAndCheckAllMatch('search for this text');return false;">some text</a>
<div id="*actual_ID*" onclick="myFunc(a, b, c, d);">
  <input type="checkbox" id="book-*actual_ID*" onclick="this.parentNode.click;return false;">
</div>
</div>

JS

function myFunc(a, b, c, d) {
  // does stuff
}
function clickAndCheckAllMatch(value) {
  $('div[onclick*='+value+']').each(function(idx,e){
  $('book-'+this.id).click();
}

MODIFICARE
Quando sono cambiato da div A etichetta quindi non ho dovuto correggere lo stato della casella di controllo.UN div o block-element deve avere qualche problema lì.
Ho anche rimosso l'onclick dai *div*, il che significa che ho potuto scegliere direttamente le caselle di controllo e cambiare i loro valori ID solo in *actual_ID*.

function clickAndCheckAllMatch(value) {
  $('input[onclick*='+value+']').each(function(idx,e){
    // e == this
    $(this)[0].click();
    if ($(this).attr('disabled')) {
      //do nothing
    } else {
      if ($(this).attr('checked')) {
        //do nothing
      } else {
        $(this)[0].click(); // only one checkbox per ID
      }
    }
  });
}
function CheckAll() {
  $('#container input[type=checkbox]:not(:checked)').each(function(idx,e){
    $(this).click(); // notice the difference ?
  });
}
È stato utile?

Soluzione

Invece di provare a utilizzare l'evento per modificare il valore della casella di controllo, farei due cose:

  1. Per offrire agli utenti un'ampia area su cui fare clic, utilizzare a label elemento, non a div. label elementi sono supportati direttamente dai browser, non devi fare nulla per farli funzionare.Esistono due modi per utilizzarli:

    <label><input type='checkbox'>Foo</label>
    

    O

    <input type='checkbox' id='chk1'><label for='chk1'>Foo</label>
    

    Il primo è utile perché non è necessario utilizzare gli ID (che devono essere totalmente univoci sulla pagina, quindi inizia a diventare una seccatura);quest'ultimo è utile per le situazioni di markup in cui non puoi avere il file input essere un figlio di label per qualsiasi ragione.

  2. Se è necessario modificare lo stato nel codice, modificare lo stato direttamente anziché tentare di attivare un evento.Ad esempio, se voglio cambiare lo stato della casella di controllo chk1, faccio solo questo:

    $('#chk1').attr("checked", true); // or false, of course
    

    ...o per deselezionare tutte le caselle di controllo in un contenitore (utile per i collegamenti "tutti" o "nessuno"):

    $('#container input[type=checkbox]').attr("checked", false); // or true, of course
    

Altri suggerimenti

Ho appena risolto un problema come questo, relativo al gestore eventi della casella di controllo reso da ASP.net come codice js nell'attributo onclick, che volevo attivare.Per prima cosa ho provato a chiamare esplicitamente l'evento clic jQuery, ma dopo un po' mi sono reso conto che non avrei avuto successo in questo modo.Quindi la soluzione che ha funzionato per me è:

someOtherObject.click(eval($('input').attr('onclick')));

Saluti.

this.parentNode.click dovrebbe essere this.parentNode.click().

this.parentNode.click è solo l'oggetto del metodo.Chiamandolo non verrà attivato l'evento clic del div.È necessario aggiungere le parentesi graffe dopo click, altrimenti l'evento non verrà attivato.

Per dare seguito al commento di Pointy, usa questo:

$(document).ready(function(){
  $('.theAnchorTagClass').click(function(){
    //Code to check all boxes here or do whatever else you need...
  });
});

Sostituisci semplicemente qualcosa del genere con qualunque elemento per cui stai cercando di acquisire l'evento clic.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top