Kontrollkästchen nach Label-Text vom umgebenden Etikett auswählen?

Question

Struktur folgt:

<label class="selectit"> 
    <input value="3" type="checkbox" name="tax_input[event_type][]" id="in-event_type-3"> 
    Workshops 
</label> 

Ich kann das leicht tun, wenn das Kontrollkästchen, um herauszufinden, geprüft ...

if ($('#in-event_type-3').attr('checked')) { 

Gibt es auch eine Möglichkeit, einen Selektor zu verwenden, wo ich „Workshops“ setzen in kann um das Kontrollkästchen zu aktivieren? Das Problem ist, dass die id des Kontrollkästchens dynamisch generiert wird und sich von Zeit zu Zeit ändert. Die label -text "Workshops" ist jedoch von mir festgelegt und ich frage mich, ob ich irgendwie einen Selektor schreiben kann, der diese "Workshops" -String verwendet, um das Kontrollkästchen zu aktivieren?

Irgendwelche Ideen dazu?

Answer 1

Try ths :contains Selektor:

$(".selectit:contains('Workshops')").find("input[type='checkbox']").attr('checked'); 

Answer 2

Ihr Etikett ein für Attribut geben:

<label class="selectit" for="in-event_type-3"> 

edit: Entschuldige bitte, nicht die ID ändert sich von Zeit zu Zeit realisieren. Sie können auch einige jQuery eingeben, um die Eingabe zu finden, und dann das for zuweisen. So:

$('input').each(function() { 
    $(this).parent().attr('for', $(this).attr('id')); 
}); 

Answer 3

ist es unmöglich, eine Klasse hinzufügen?

nachdem es einfacher ist, es auszuwählen?

if($('.Workshops').is(':checked')) 

Answer 4

, wenn Sie Ihre Eingabe einer Klasse steuern kann auf sie setzen (es nennen wir „Werkstatt“), dann wäre es:

$(".workshop").attr("checked", "checked"); 

Answer 5

Also, alle anderen eine Klasse zu verwenden, hat gesagt, - höre ihnen zu! Es ist viel einfacher!

Manchmal ist es jedoch keine Option, den HTML-Inhalt zu ändern. In diesem Fall müssten wir auf einige schmutzige Arbeiten zurückgreifen und den gesamten Text betrachten, der in den Etikettenelementen enthalten ist, um das entsprechende Kontrollkästchen zu finden.

var selectedCheckboxes = []; 
$.each($("#container > label"),function(index,elem){ 
    var labelText = $(elem).text(); 
    var testString = "Workshops"; 
    if (labelText.match(testString)){ 
    selectedCheckboxes = $(elem).find("input[type='checkbox']:checked"); 
    } 
}); 

Ich muss Sie warnen, dass diese Lösung für das einfache Beispiel funktionieren würde, dass Sie gab jedoch, wenn das Markup etwas komplizierter ist (wie in weitere untergeordnete Elemente mit ihren eigenen Textinhalt), dann würde diese Methode müssen viel größer und viel komplizierter.

Es gibt keinen integrierten Selektor, der mit dem Textinhalt von Elementen im HTML-Markup übereinstimmt, und das zu Recht. Der Textinhalt von Elementen sollte nur eine visuelle Darstellung von Daten oder Informationen sein; Es sollte niemals Identitätsinformationen enthalten. Um ein Element und eine Menge zu identifizieren, die sich von seinen Geschwistern oder Nachkommen unterscheidet, verwenden wir die Attribute id und class. Es gibt mehr, die verwendet werden können, aber das sind die Grundbausteine.

Eine Sache zu beachten ist hier das Verhalten der .text() Funktion von jQuery. Es wird:

Holen Sie sich den kombinierten Textinhalt jedes Elements in der Menge der übereinstimmenden Elemente, einschließlich ihrer Nachkommen.

^{Hervorhebungen}

Der :contains() Wähler hat ein ähnliches Verhalten in Bezug auf Nachkommen und hat already been covered in einer früheren Antwort.

auf eine mehr Hands-on und Anschauungsbeispiel für diese Einschränkung ...

Vor diesem minimalistischen HTML-Schnipsel:

<div id="matt"> 
    One 
    <span>Two</span> 
    <div> 
    <label>Three</label> 
    </div> 
    Four 
</div> 

Ein Aufruf $("#matt").text() würde zu:

OneTwoThreeFour

alle Nachkommen Textinhalt ist ebenfalls enthalten ...

Answer 6

var element = $('input').filter(function() { 
    return $.trim($(this).parent('label').text())=='Workshops'?$(this):null; 
}); 

var isChecked = $(element).attr('checked'); //true-false