jQuery - výber a zmena triedy - javascript, jquery

Mám takýto formulár:

<form action="" onsubmit="void(0)" class="mainform">
<label class="form3"><input type="checkbox"> One a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> two a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Three a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Four a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Five a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Six a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Seven a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> eight a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 9 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 10 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 11 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 12 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 13 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 14 a fancy cross-browser styled checkbox</label>
</form>

Teraz to chcem urobiť. Keď používateľ začiarkne alebo zruší začiarknutie políčka, chcem na štítok pridať / odstrániť triedu, aby som mohol označiť iný farebný text, keď je začiarknuté políčko a ak nie.

Snažím sa to urobiť takto:

$(document).ready(function(){
$(".form3").each(function(i,e) {
if(checklist[i] == "")
{
$(this).find("input[type=checkbox]").attr("checked", false);
$(this).appendTo($("form"));
$(this).find("input[type=checkbox]").change(function() {
$(this).closest("label").addClass("checkselected");
});
$(this).closest("label").removeClass("checkselected");

}
else
{
$(this).find("input[type=checkbox]").attr("checked", true);
$(this).find("input[type=checkbox]").change(function() {
$(this).closest("label").removeClass("checkselected");
});
$(this).closest("label").addClass("checkselected");
}
});
});

Teraz viem, že to nemusí byť správny spôsob, ako to urobiť, pretože to robím vo vnútri „$ (“. Form3 “). (Funkcia (i, e)“

Vďaka tomu to funguje, ale iba raz. Ako môžem dosiahnuť, aby to fungovalo aj pri kliknutiach na muličky na rovnaké začiarkavacie políčko.

odpovede:

Ak som pochopil vašu otázku správne, potom to, čo sa snažíte urobiť, je priradiť obslužný program udalosti kliknutia ku všetkým začiarkavacím políčkam a pridať / odobrať triedu rodičovi label z toho, na ktorý sa kliklo. Ak je to správne, môžete to urobiť:

$("input[type="checkbox"]").change(function() {
$(this).closest("label").toggleClass("someClass");
});

Na toggleClass metóda odstraňuje potrebu skontrolovať, čizačiarkavacie políčko je začiarknuté. V druhom argumente môžete uviesť, či má byť trieda pridaná alebo odstránená, takže ak sa začnú niektoré z vašich začiarkavacích políčok začiarknuť, môžete použiť tento postup:

$("input[type="checkbox"]").change(function() {
$(this).closest("label").toggleClass("someClass", this.checked);
});

Tu je a pracovný príklad vyššie uvedeného kódu.