Question

Je rencontre des problèmes d'obtenir une fonction qui clique sur toutes les cases apparié de recherche. L'événement click semble le feu, mais aucune case est vérifié ni myFunc () appelé.

Il fonctionne parfaitement lorsque vous cliquez sur chaque case à cocher manuellement, mais qui veut le faire avec plus de 40 cases -. Pas mes utilisateurs
Vous pouvez vous demander pourquoi j'utiliser un div-onclick au lieu de directement sur la case d'entrée. C'est parce que je veux donner à mes utilisateurs une zone plus cliquer sur qu'une petite case à cocher.

Je veux offrir mes utilisateurs avec un seul lien hypertexte pour sélectionner plusieurs cases qui correspondent à certaine valeur d'attribut (s).

J'ai besoin solution vite que je suis hors du temps.

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

EDIT Quand j'ai changé de div étiquette je na pas avoir à corriger l'état de case à cocher. div ou le bloc-élément doit avoir une question là-bas.
J'ai aussi enlevé le onclick des * div * s, ce qui veut dire que je suis en mesure de cibler les cases directement et pourrait changer leurs valeurs d'ID juste le * 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 ?
  });
}
Était-ce utile?

La solution

Plutôt que d'essayer d'utiliser l'événement pour modifier la valeur de la case à cocher, je ferais deux choses:

  1. Pour donner aux utilisateurs une grande zone à cliquer, utilisez un élément label, pas div. éléments label sont pris en charge directement par les navigateurs, vous n'avez rien à faire pour les faire travailler. Il y a deux façons de les utiliser:

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

    ou

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

    L'ancien est agréable parce que vous ne devez pas utiliser ID (qui doivent être tout à fait unique sur la page, il commence à devenir comme une douleur); ce dernier est agréable pour les situations de balisage où vous ne pouvez pas avoir le input être un enfant de la label pour une raison quelconque.

  2. Si vous devez changer l'état dans le code, changer l'état directement plutôt qu'en essayant de déclencher un événement. Par exemple, si je veux changer l'état de la case à cocher chk1, je fais ceci:

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

    ... ou pour effacer toutes les cases dans un récipient (utile pour les « tous les » liens ou « none »):

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

Autres conseils

Il suffit de résoudre un problème comme celui-ci, lié au gestionnaire d'événements de case à cocher rendu par ASP.net comme code js dans l'attribut onclick, que je voulais déclencher. Tout d'abord essayé avec l'événement de clic jQuery explicitement appeler, mais après un certain temps rendu compte que je ne réussirai pas cette façon. Donc, la solution qui a fonctionné pour moi:

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

Vive.

this.parentNode.click devrait être this.parentNode.click().

this.parentNode.click est juste l'objet de la méthode. L'appelant ne se déclenche pas l'événement click du div. Vous devez ajouter les accolades après click, sinon l'événement ne se déclenche pas.

Pour donner suite au commentaire de Pointy, utilisez ceci:

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

Il suffit de remplacer quelque chose comme ça pour tout élément est que vous essayez de capturer l'événement de clic pour.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top