[jQuery] Class toevoegen aan parent div checkbox/radiobutton

[Wolf3D]

Hoewel het simpel leek, ben ik hier inmiddels al uren mee bezig.

Ik probeer een generiek stukje jquery te schrijven waarmee ik bij radiobuttons en checkboxes de bovenliggende 'container-select' kan voorzien van een extra class 'selected'. Daarnaast wil ik kunnen selecteren door op de bovenliggende div te klikken. Bij een checkbox moet deze dan uit of aan gaan. Bij een radiobutton moet deze dan aan gaan voor de huidige container.

Ik heb de volgende html bij een checkbox:
code:

<div class="container-select">
  <div class="form-select">
    <input class="form-checkbox" type="checkbox" name="select_x" />
  </div>
</div>

of de volgende html code bij een radiobutton
code:

<div class="container-select">
  <div class="form-select">
    <input class="form-radio" type="radio" name="select_y" />
  </div>
</div>

Voor de radio buttons heb ik het werkend gekregen, aangezien er altijd maar eentje geselecteerd mag zijn en de andere dan automatisch gedeselecteerd wordt:
code:

$('.container-select', context).click(function(event) {
  // Check radio when clicked on container
  $('.form-radio', this).prop('checked', true);
  // Remove all 'selected'-classes from all containers
  $('.container-select').removeClass('selected');
  // Add 'selected'-class for current container
  $(this).addClass('selected');
});

Echter voor de checkboxes werkt het iets anders, aangezien je een checkbox aan en uit kan zetten en meerdere checkboxes tegelijk kan selecteren. Het lukt me wel om de class toe te voegen als ik de checkbox aan- of uitvink. Echter als ik de bovenliggende container aanklik gaat het fout en blijft de checkbox ongewijzigd. Ook het uitvinken van de checkbox haalt de 'selected' class van de andere container weg.

Zie code
code:

if ($('.form-checkbox', this).is(':checked')) {
  $('.form-checkbox', this).prop('checked', true);
  $(this).addClass('selected');
}

if (!$('.form-checkbox', this).is(':checked')) {
  $('.form-checkbox', this).prop('checked', false);
  $(this).removeClass('selected');
}

Ook pogingen om event.preventDefault() te gebruiken zijn niet gelukt, hoewel het wel lijkt dat ik het in die hoek moet zoeken.

Waar zit mijn denk fout?

Om het wat makkelijker te maken: zie https://jsfiddle.net/vx3hzmrz/

[Biersteker]

quote:

Wolf3D schreef op dinsdag 07 april 2015 @ 13:05:
Hoewel het simpel leek, ben ik hier inmiddels al uren mee bezig.

...
Waar zit mijn denk fout?

Om het wat makkelijker te maken: zie https://jsfiddle.net/vx3hzmrz/

Welke Jquery versie gebruik je? ( er is nogal wat verschil tussen 1.7.2 en hoger )
code:

if ($('.form-checkbox', this).is(':checked')) {
  $('.form-checkbox', this).prop('checked', true);
  $(this).addClass('selected');
} else  {
  $('.form-checkbox', this).prop('checked', false);
  $(this).removeClass('selected');
}

Dit stukje (heb er even een if (){}else{} van gemaakt.) lijkt te falen in Jquery door: "$('.form-checkbox', this).is(':checked')" want dit: "$(".form-checkbox", this).prop('checked') == true" doet het wel in 1.7.2 en hoger .


werkende fiddle. https://jsfiddle.net/x90r3067/

[Wolf3D]

Excuses. De versie was ik inderdaad nog even vergeten: 1.9.1

Bedankt voor je aanpassingen! Het werkt inderdaad een stuk beter nu. Alleen gaat het nog fout als je de checkbox zelf direct aanklikt. Enig idee waar dat nog door komt?

[Biersteker]

Volgens mij zou je dat kunen afvangen met e.stopPropagation();
code:

$(".form-checkbox").click(function(e){
e.stopPropagation();
  });

Je kan natuurlijk ook een onclick listener op je checkbox gooien die eigenlijk hetzelfde doet als de andere onclick listener.
https://jsfiddle.net/byhveg20/

[Wolf3D]

Super! Het werkt nu inderdaad zoals ik wilde! Thanks!!

[R4gnax]

Waarom doe je dit überhaupt met JavaScript? Je kunt een <label> gebruiken ipv een <div>. En als je een geselecteerde input anders wilt stylen, dan kun je dat opzetten via de :checked pseudo-class in combinatie met een next sibling ( + ) combinator.

Willekeurig voorbeeld van codepen geplukt: http://codepen.io/martinwolf/pen/vLpwG

[Wolf3D]

Het probleem is dat ik de bovenliggende <div> probeer aan de passen. Via puur CSS is dit volgens mij niet mogelijk...

[C0rnelis]

quote:

Wolf3D schreef op dinsdag 07 april 2015 @ 14:41:
Super! Het werkt nu inderdaad zoals ik wilde! Thanks!!

Echt ? Selecteer een radio en checkbox en bedenk nu je radio keuze = weg grijs vlak bij de checkboxes Is dat gewenst ? Zo begreep ik het niet namelijk.

https://jsfiddle.net/vx3hzmrz/2/ maakt ook gebruik van de genoemde tip om labels te gebruiken, dit zorgt erweer voor minder javascript en markup nodig te hebben!

Wat R4gnax laat zien is inderdaad niet wat je wilt bereiken omdat de CSS selector de rules toepast op het input element i.p.v. het parent element (wat er links van de + staat).

[R4gnax]

quote:

C0rnelis schreef op donderdag 09 april 2015 @ 20:15:
[...]
Wat R4gnax laat zien is inderdaad niet wat je wilt bereiken omdat de CSS selector de rules toepast op het input element i.p.v. het parent element (wat er links van de + staat).

Wat mijn aangehaalde voorbeeld demonstreert is hoe je via puur CSS de state van een checkbox of radio button kunt gebruiken om stijl te wijzigen. Ja; het werkt niet direct op het container element. Maar weet je; je kunt ook je DOM structuur of bestaande stijlregels zo ombouwen dat je niet de stijl vanuit het container element hoeft aan te passen.

De CSS selector die de state wijziging regelt, werkt helemaal niet op het input element, zoals je suggereert. Deze werkt op het label element dat er direct op volgt. Het input element zelf wordt verborgen (weliswaar niet op zo'n manier dat bijv. keyboard interactie ook nog steeds werken, maar dat kan wel) en vervolgens gaat het label als de complete 'container' fungeren. Er wordt dan m.b.v. ::before en ::after pseudo-elementen een gestyleerde checkbox of radiobutton in het label ingebouwd.

Natuurlijk hoef je dat niet zo te doen. Je kunt ook de standaard radiobutton of checkbox zichtbaar houden en enkel absoluut positioneren zodat het label er deels onderdoor vloeit om zo de illusie te geven dat er een aanpassing op een container om het geheel heen plaats vindt.

Voorbeeld: http://jsfiddle.net/zh9Ltr66/


Dit soort zaken via JavaScript gaan implementeren is werkelijk verschrikkelijk achterhaald.

R4gnax wijzigde deze reactie 10-04-2015 12:23 (53%)

[C0rnelis]

quote:

R4gnax schreef op vrijdag 10 april 2015 @ 11:56:
[...]


Wat mijn aangehaalde voorbeeld demonstreert is hoe je via puur CSS de state van een checkbox of radio button kunt gebruiken om stijl te wijzigen. Ja; het werkt niet direct op het container element. Maar weet je; je kunt ook je DOM structuur of bestaande stijlregels zo ombouwen dat je niet de stijl vanuit het container element hoeft aan te passen.

De CSS selector die de state wijziging regelt, werkt helemaal niet op het input element, zoals je suggereert. Deze werkt op het label element dat er direct op volgt. Het input element zelf wordt verborgen (weliswaar niet op zo'n manier dat bijv. keyboard interactie ook nog steeds werken, maar dat kan wel) en vervolgens gaat het label als de complete 'container' fungeren. Er wordt dan m.b.v. ::before en ::after pseudo-elementen een gestyleerde checkbox of radiobutton in het label ingebouwd.

Natuurlijk hoef je dat niet zo te doen. Je kunt ook de standaard radiobutton of checkbox zichtbaar houden en enkel absoluut positioneren zodat het label er deels onderdoor vloeit om zo de illusie te geven dat er een aanpassing op een container om het geheel heen plaats vindt.

Voorbeeld: http://jsfiddle.net/zh9Ltr66/


Dit soort zaken via JavaScript gaan implementeren is werkelijk verschrikkelijk achterhaald.

Nice

Betreffende "De CSS selector die de state wijziging regelt, werkt helemaal niet op het input element, zoals je suggereert.":
Ik zat inderdaad verkeerd! Ik had in m'n hoofd een .container-select + input, maar dat had hier natuurlijk een > moeten zijn, mijn opmerking was hoe dan ook invalide

Persoonlijk kan ik meer met JS dan CSS en neig inderdaad iets te snel de verkeerde kant voor oplossingen als dit... ik wijt het aan gebrek van ervaring met CSS, terwijl ik weet dat JS bijna letterlijk alles te doen valt en "ik er dan wel uitkom"