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:
of de volgende html code bij een radiobutton
code:
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:
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:
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/
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:
1
2
3
4
5
| <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:
1
2
3
4
5
| <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:
1
2
3
4
5
6
7
8
| $('.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:
1
2
3
4
5
6
7
8
9
| 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/
