Case à cocher (checkbox)
En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="loyaltyCardForm" class="loyalty-card-form"> <div class="loyalty-card-form-checkbox"> <input type="checkbox" name="offerLoyaltyCard" id="offerLoyaltyCard" value="1"/> </div> <div class="loyalty-card-form-label"> <label for="offerLoyaltyCard"> <span class="tagline tagline-row-1"> <spring:theme code="naos.product.loyaltycard.offer.title" /> </span><br/> <span class="tagline tagline-row-2"> <spring:theme code="naos.product.loyaltycard.offer.message" /> </span> </label> </div> </div> |
|
1 2 3 4 5 6 7 8 |
var $offerLoyaltyCard = $('#offerLoyaltyCard'); $('#loyaltyCardForm').on('click', function(){ if(!$('#offerLoyaltyCard').is(':checked')){ $offerLoyaltyCard.prop('checked', true); } else { $offerLoyaltyCard.prop('checked', false); } }); |
Bouton radio
Source: Toggling Radio Buttons with jQuery et jsFiddle.
Avec 2 boutons radio seulement
Source: jsFiddle.
|
1 2 3 |
<button id="toggler">click me</button><br> <input type="radio" name="speeds" value="fast" checked>fast<br> <input type="radio" name="speeds" value="slow">slow<br> |
|
1 2 3 |
$('#toggler').click(function() { $('input[type="radio"]').not(':checked').prop("checked", true); }); |
Avec plus que 2 boutons radio
Source: jsFiddle.
|
1 2 3 4 |
<button id="toggler">click me</button><br> <input type="radio" name="speeds" value="fast" checked>fast<br> <input type="radio" name="speeds" value="medium">medium<br> <input type="radio" name="speeds" value="slow">slow<br> |
|
1 2 3 4 5 6 7 8 9 |
var $radios = $('input[type="radio"][name="speeds"]') $('#toggler').click(function() { var $checked = $radios.filter(':checked'); var $next = $radios.eq($radios.index($checked) + 1); if(!$next.length){ $next = $radios.first(); } $next.prop("checked", true); }); |