A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery(document).ready(function(){ // http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/ jQuery('.radio-boxes-group').on('click', '.radio-box', function(){ var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name'); jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked'); jQuery(this).find('input:radio')[0].checked = true; if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!-- 1er groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="six columns payment-mode"> <div class="radio-box is-checked"> <input type="radio" id="monthly_payment" name="payment_mode" value="" checked="checked" /> <div class="information"> <label for="monthly_payment">Par mois</label> <p class="complementary-information">15€/mois</p> </div> </div> </div> <div class="six columns payment-mode"> <div class="radio-box"> <input type="radio" id="yearly_payment" name="payment_mode" value="" /> <div class="information"> <label for="yearly_payment">En une fois</label> <p class="complementary-information">180€ pour 1 an</p> </div> </div> </div> </div> </div> <!-- 2ème groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box is-checked"> <input type="radio" id="cb_method" name="payment_method" value="" checked="checked" /> <div class="information"> <label for="cb_method">Prélèvement CB</label> <p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="cheque_method" name="payment_method" value="" /> <div class="information"> <label for="cheque_method">Par chèque</label> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="sepa_method" name="payment_method" value="" /> <div class="information"> <label for="sepa_method">Prélèvement SEPA (RIB)</label> </div> </div> </div> </div> </div> |
Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen
|
1 2 3 |
<div class="radio-box"> <input onclick="[...]" /> </div> |
Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box, compte pour un clic sur le champ radio ou checkbox dont il est le parent.
|
1 2 3 4 5 6 |
if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input. jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } |