Frage

Ich habe Probleme, eine Funktion erhalten, die alle Such abgestimmt Kontrollkästchen klickt. Das Click-Ereignis scheint Feuer, aber kein Kontrollkästchen wird geprüft noch ist myFunc () aufgerufen.

Es funktioniert perfekt, wenn jeder Checkbox manuell klicken, aber wer will das schon mit 40+ Kontrollkästchen tun -. Nicht meine Benutzer
Sie fragen sich vielleicht, warum ich ein div-Onclick verwenden, anstatt direkt am Eingang Checkbox. Das ist, weil ich meine Nutzer wollen ein den größer Bereich klicken Sie auf als ein kleines Kästchen.

Ich mag meine Benutzer mit einem einzigen Hyperlink bieten mehr Kontrollkästchen auswählen, die bestimmten Attributwert entsprechen (s).

Ich brauche schnelle Lösung, wie ich Zeit unterwegs bin.

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

Bearbeiten
Als ich wechselte von div Label dann habe ich nicht haben Sie das Kontrollkästchen Zustand zu korrigieren. A div oder Block-Element muss es irgendeine Frage haben.
Ich habe auch den Onclick aus dem * div * s entfernt, was bedeutete, dass ich in der Lage war, die Kontrollkästchen direkt zum Ziel und kann ihre ID-Werte ändern, um nur das * 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 ?
  });
}
War es hilfreich?

Lösung

Anstatt zu versuchen, um das Ereignis zu verwenden, um den Wert der Checkbox zu ändern, würde ich zwei Dinge tun:

  1. Um den Benutzern eine große Fläche geben zu klicken, wird ein label Element zu verwenden, keinen div. label Elemente von Browsern direkt unterstützt werden, müssen Sie nichts zu tun, sie arbeiten zu lassen. Es gibt zwei Möglichkeiten, sie zu benutzen:

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

    oder

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

    Das erstere ist schön, weil Sie verwenden müssen IDs nicht (die völlig einzigartig auf der Seite sein, so beginnt es immer einen Schmerz zu sein); letztere schön für Markup Situationen, in denen Sie nicht der input sein ein Kind des label aus irgendeinem Grund haben kann.

  2. Wenn Sie den Zustand in Code ändern, um den Zustand direkt und nicht ändern, als indem man versucht, ein Ereignis auszulösen. Zum Beispiel, wenn ich den Zustand der Checkbox chk1 ändern will, ich dies nur tun:

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

    ... oder alle Kontrollkästchen in einem Behälter löschen (nützlich für die „alle“ oder „none“ Links):

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

Andere Tipps

gelöst Nur ein Problem wie diese, bezogen auf Kontrollkästchen des Ereignishandler von ASP.net wie js Code in dem Onclick-Attribute gerendert, die ich Trigger wollte. Zuerst versuchte mit explizit jQuery Click-Ereignis aufrufen, aber nach einer Weile klar, dass ich auf diese Weise nicht gelingen wird. So ist die Lösung, die für mich gearbeitet ist:

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

Prost.

this.parentNode.click sollte this.parentNode.click() sein.

this.parentNode.click ist nur die Methode Objekt. Der Aufruf wird es nicht das Click-Ereignis des div feuern. Sie müssen die Klammern nach click, da sonst das Ereignis wird nicht ausgelöst.

hinzufügen

Um oben auf Zipfel Kommentar zu folgen, benutzen Sie diese:

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

Nur Ersatz etwas wie das für was auch immer Element ist es Sie versuchen, für das Click-Ereignis zu erfassen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top