Étiquette : checkbox

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

10/06/2020 / admin

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

// Magento 2 core forms sexy inputs type=radio and type=checkbox
// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!
// <div class="field choice">
//     <input type="checkbox" id="is_subscribed" class="checkbox" />
//     <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>
// </div>
.field.choice {
    @custom-field_choice---width: 20px;
    position: relative;
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -99999em;
        + .label {
            &:before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                margin-right: 8px;
                width: @custom-field_choice---width;
                height: @custom-field_choice---width;
                border: 1px solid @color_green;
                cursor: pointer;
                background: #fff;

                // Fine tuning vertical-align if needed
                //position: relative;
                //top: 2px;
            }
        }
        &:checked {
            + .label {
                &:before {
                    background: @color_green;
                }
            }
        }
    }
    input[type="radio"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width;
            }
        }
    }
    input[type="checkbox"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width/10;
            }
        }
    }
}

// Magento 2 core forms sexy inputs type=radio and type=checkbox

// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!

// <div class="field choice">

// <input type="checkbox" id="is_subscribed" class="checkbox" />

// <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>

// </div>

.field.choice {

@custom-field_choice---width: 20px;

position: relative;

input[type="radio"],

input[type="checkbox"] {

position: absolute;

left: -99999em;

+ .label {

&:before {

content: "";

display: inline-block;

vertical-align: bottom;

margin-right: 8px;

width: @custom-field_choice---width;

height: @custom-field_choice---width;

border: 1px solid @color_green;

cursor: pointer;

background: #fff;

// Fine tuning vertical-align if needed

//position: relative;

//top: 2px;

}

&:checked {

+ .label {

&:before {

background: @color_green;

}

input[type="radio"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width;

}

input[type="checkbox"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width/10;

}

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

17/07/2019 / admin

Sources:

How to detect a checkbox click in jQuery

<input type="checkbox" id="" class"js-selectRow" name="" value="" />

1	<input type="checkbox" id="" class"js-selectRow" name="" value="" />

  $(document).on('change', '.js-selectRow', function() {
    const $_THIS = $(this);
    if ( $_THIS.prop('checked') === true ) {
      // if is checked do sth...
      $_THIS.closest('tr').addClass('row-isSelected');
    } else if ( $_THIS.prop('checked') === false ) {
      // if is not checked do sth else...
      $_THIS.closest('tr').removeClass('row-isSelected');
    }
  });

$(document).on('change', '.js-selectRow', function() {

const $_THIS = $(this);

if ( $_THIS.prop('checked') === true ) {

// if is checked do sth...

$_THIS.closest('tr').addClass('row-isSelected');

} else if ( $_THIS.prop('checked') === false ) {

// if is not checked do sth else...

$_THIS.closest('tr').removeClass('row-isSelected');

}

});

[jQuery] Vérifier si au moins une checkbox est cochée

09/04/2019 / admin

Source: jQuery see if any or no checkboxes are selected

  // jQuery see if any or no checkboxes are selected
  // https://stackoverflow.com/a/4087006
  $.fn.areAnyCheckboxesChecked = function(HTMLScope){
    // Retourne true/false
    return !!$('input[type=checkbox]:checked', HTMLScope).length;

    // Retourne le nombre de checkboxes qui sont checked (0 si aucune)
    return $('input[type=checkbox]:checked', HTMLScope).length;
  }

// jQuery see if any or no checkboxes are selected

// https://stackoverflow.com/a/4087006

$.fn.areAnyCheckboxesChecked = function(HTMLScope){

// Retourne true/false

return !!$('input[type=checkbox]:checked', HTMLScope).length;

// Retourne le nombre de checkboxes qui sont checked (0 si aucune)

return $('input[type=checkbox]:checked', HTMLScope).length;

}

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

08/04/2019 / admin

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

<td class="col-damaged col-boolean" onClick="$(this).booleanIntent(event);">
  <input type="checkbox" id="product_00001_damaged" name="product_00001" />
</td>

</td>

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      return false;
    } else {
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');

      if ( CHECKED_VALUE != true ) {
        $_INPUT.prop('checked', true);
      } else {
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

return false;

} else {

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

if ( CHECKED_VALUE != true ) {

$_INPUT.prop('checked', true);

} else {

$_INPUT.prop('checked', false);

}

Code commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      console.log('is input');
      return false;
    } else {
      console.log('is not input');
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');
      console.log('CHECKED_VALUE: '+CHECKED_VALUE);

      if ( CHECKED_VALUE != true ) {
        console.log('input is not checked, so we check it');
        $_INPUT.prop('checked', true);
      } else {
        console.log('input is checked, so we uncheck it');
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

console.log('is input');

return false;

} else {

console.log('is not input');

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

console.log('CHECKED_VALUE: '+CHECKED_VALUE);

if ( CHECKED_VALUE != true ) {

console.log('input is not checked, so we check it');

$_INPUT.prop('checked', true);

} else {

console.log('input is checked, so we uncheck it');

$_INPUT.prop('checked', false);

}

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

16/03/2017 / admin

Case à cocher (checkbox)

En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard

<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>

</div>

<spring:theme code="naos.product.loyaltycard.offer.title" />

</span><br/>

<spring:theme code="naos.product.loyaltycard.offer.message" />

</span>

</label>

</div>

var $offerLoyaltyCard = $('#offerLoyaltyCard');
$('#loyaltyCardForm').on('click', function(){
    if(!$('#offerLoyaltyCard').is(':checked')){
        $offerLoyaltyCard.prop('checked', true);
    } else {
        $offerLoyaltyCard.prop('checked', false);
    }
});

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.

<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>

<button id="toggler">click me</button><br>

$('#toggler').click(function() {
    $('input[type="radio"]').not(':checked').prop("checked", true);
});

$('#toggler').click(function() {

$('input[type="radio"]').not(':checked').prop("checked", true);

});

Avec plus que 2 boutons radio

Source: jsFiddle.

<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>

<button id="toggler">click me</button><br>

<input type="radio" name="speeds" value="medium">medium<br>

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);
});

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);

});

[jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché

31/08/2016 / admin

Source : CHECK IF ANY CHECKBOXES ARE SELECTED IN JQUERY

function checkChecked(formname) {
    var anyBoxesChecked = false;
    $('#' + formname + ' input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
            anyBoxesChecked = true;
        }
    });
 
    if (anyBoxesChecked == false) {
      //Do something
    } 
}

function checkChecked(formname) {

var anyBoxesChecked = false;

$('#' + formname + ' input[type="checkbox"]').each(function() {

if ($(this).is(":checked")) {

anyBoxesChecked = true;

}

});

if (anyBoxesChecked == false) {

//Do something

}

Cas un peu plus complexe :

// Vérifier qu'au moins une case à cocher est active dans chaque catégorie de filtres
// et afficher un témoin en fonction
function checkIfAnyBoxIsChecked(){
  var anyBoxIsChecked = false;
  $('ul.Filters-facets__list').each(function(){
    if ($(this).find('input[type="checkbox"]').is(':checked')) {
      anyBoxIsChecked = true;
      $(this).closest('.facet-nav-item').addClass('has-active-facet');
    }
  });
  if (anyBoxIsChecked == false) {}
}

checkIfAnyBoxIsChecked();

// Vérifier qu'au moins une case à cocher est active dans chaque catégorie de filtres

// et afficher un témoin en fonction

function checkIfAnyBoxIsChecked(){

var anyBoxIsChecked = false;

$('ul.Filters-facets__list').each(function(){

if ($(this).find('input[type="checkbox"]').is(':checked')) {

anyBoxIsChecked = true;

$(this).closest('.facet-nav-item').addClass('has-active-facet');

}

});

if (anyBoxIsChecked == false) {}

}

checkIfAnyBoxIsChecked();

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

<li class="facet-nav-item">
    <a class="link level0 is-active" href="#">
        Marques	<i class="active-facet-indicator"></i>
    </a>
    <ul class="Filters-facets__list">
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
</li>

Marques <i class="active-facet-indicator"></i>

</a>

</ul>

</li>

.facet-nav{  
    &-item{
        .active-facet-indicator{
            display: none;
        }
        &.has-active-facet{
            .active-facet-indicator{
                display: inline-block;
                content: '';
                width: 10px;
                height: 10px;
                margin-left: 8px;
                background-color: $corporate-color-one;
                border-radius: 50%;
            }
        }        
    }
}

.facet-nav{

&-item{

.active-facet-indicator{

display: none;

}

&.has-active-facet{

.active-facet-indicator{

display: inline-block;

content: '';

width: 10px;

height: 10px;

margin-left: 8px;

background-color: $corporate-color-one;

border-radius: 50%;

}

[jQuery] Vérifier qu’au moins une checkbox est sélectionnée

31/05/2016 / admin

var isCheckedCheckbox = $('input[type="checkbox"]:checked');
$('.element').each(function(){
	if($(this).find(isCheckedCheckbox).length > 0){
		// faire quelque chose si au moins une checkbox est sélectionnée
	}
	else {
		// sinon, faire autre chose
	}
});

var isCheckedCheckbox = $('input[type="checkbox"]:checked');

$('.element').each(function(){

if($(this).find(isCheckedCheckbox).length > 0){

// faire quelque chose si au moins une checkbox est sélectionnée

}

else {

// sinon, faire autre chose

}

});

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

26/02/2016 / admin

Simulation jsFiddle.net

Source : make an input invisible but clickable through CSS?

input {
  opacity: 0;
}

input {

opacity: 0;

}

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

input[type=radio] {
  border: 0px;
  width: 100%;
  height: 2em;
}

input[type=radio] {

border: 0px;

width: 100%;

height: 2em;

}

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

/*
 * Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).
 * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details.
 * https://github.com/kmewhort/pointer_events_polyfill
 */

// constructor
function PointerEventsPolyfill(options){
    // set defaults
    this.options = {
        selector: '*',
        mouseEvents: ['click','dblclick','mousedown','mouseup'],
        usePolyfillIf: function(){
            if(navigator.appName == 'Microsoft Internet Explorer')
            {
                var agent = navigator.userAgent;
                if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){
                    var version = parseFloat( RegExp.$1 );
                    if(version < 11)
                      return true;
                }
            }
            return false;
        }
    };
    if(options){
        var obj = this;
        jQuery.each(options, function(k,v){
          obj.options[k] = v;
        });
    }

    if(this.options.usePolyfillIf())
      this.register_mouse_events();
}

// singleton initializer
PointerEventsPolyfill.initialize = function(options){
    if(PointerEventsPolyfill.singleton == null)
      PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);
    return PointerEventsPolyfill.singleton;
};

// handle mouse events w/ support for pointer-events: none
PointerEventsPolyfill.prototype.register_mouse_events = function(){
    // register on all elements (and all future elements) matching the selector
    jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){
       if(jQuery(this).css('pointer-events') == 'none'){
             // peak at the element below
             var origDisplayAttribute = jQuery(this).css('display');
             jQuery(this).css('display','none');

             var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

            if(origDisplayAttribute)
                jQuery(this)
                    .css('display', origDisplayAttribute);
            else
                jQuery(this).css('display','');

             // fire the mouse event on the element below
            e.target = underneathElem;
            jQuery(underneathElem).trigger(e);

            return false;
        }
        return true;
    });
};

* Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).

* https://github.com/kmewhort/pointer_events_polyfill

// constructor

function PointerEventsPolyfill(options){

// set defaults

this.options = {

selector: '*',

mouseEvents: ['click','dblclick','mousedown','mouseup'],

usePolyfillIf: function(){

if(navigator.appName == 'Microsoft Internet Explorer')

{

var agent = navigator.userAgent;

if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){

var version = parseFloat( RegExp.$1 );

if(version < 11)

return true;

}

return false;

}

};

if(options){

var obj = this;

jQuery.each(options, function(k,v){

obj.options[k] = v;

});

}

if(this.options.usePolyfillIf())

this.register_mouse_events();

}

// singleton initializer

PointerEventsPolyfill.initialize = function(options){

if(PointerEventsPolyfill.singleton == null)

PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);

return PointerEventsPolyfill.singleton;

};

// handle mouse events w/ support for pointer-events: none

PointerEventsPolyfill.prototype.register_mouse_events = function(){

// register on all elements (and all future elements) matching the selector

jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){

if(jQuery(this).css('pointer-events') == 'none'){

// peak at the element below

var origDisplayAttribute = jQuery(this).css('display');

jQuery(this).css('display','none');

var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

if(origDisplayAttribute)

jQuery(this)

.css('display', origDisplayAttribute);

else

jQuery(this).css('display','');

// fire the mouse event on the element below

e.target = underneathElem;

jQuery(underneathElem).trigger(e);

return false;

}

return true;

});

};

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

09/12/2015 / admin

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Article en version PDF (pour la postérité) : Custom Style All Your Form Elements with Pure CSS and No javascript (PDF).
Code source HTML/CSS : pure-css-custom-form-elements (zip)

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

<div class="styled"> 
<select> 
<option>Explorer</option> 
<option>Firefox</option> 
<option>Webkit</option> 
</select> 
</div>

<option>Explorer</option>

<option>Firefox</option>

<option>Webkit</option>

</select>

</div>

div.styled { 
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(formelements-select.png) no-repeat bottom right; 
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}
div.styled select { 
    width:115% /* this percentage effectively extends the drop down button out of view */; 
    background-color:transparent /* this hides the select's background making any styling visible from the div */; 
    background-image:none; 
    -webkit-appearance: none /* this is required for Webkit browsers */; 
    border:none; 
    box-shadow:none; 
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}

div.styled {

overflow:hidden; /* this hides the select's drop button */

padding:0;

margin:0;

background: white url(formelements-select.png) no-repeat bottom right;

/* this is the new drop button, in image form */

width:12em; border-radius:2px;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

border: solid 1px #ccc;

}

div.styled select {

width:115% /* this percentage effectively extends the drop down button out of view */;

background-color:transparent /* this hides the select's background making any styling visible from the div */;

background-image:none;

-webkit-appearance: none /* this is required for Webkit browsers */;

border:none;

box-shadow:none;

padding:0.3em 0.5em; /* padding should be added to the select, not the div */

}

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

.sexy-select{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  &:after{
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% - 2px); // 2px = hauteur du caret/2
    pointer-events: none;
    .caret;
  }
  .form-control{
    width: calc(100% + 30px);
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    padding-right: 36px;
  }
  &.is-light{
    .museo-variant(700);
    border-bottom: 1px solid #ddd;
    .form-control{
      color: @brand-primary;
    }
  }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .sexy-select{
    padding-right: 24px;
    .form-control{
      padding-right: 26px;
    }
  }
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .sexy-select{
    .form-control{
      width: 200%;
    }
  }
}

.sexy-select{

position: relative;

display: block;

overflow: hidden;

padding: 0;

margin: 0;

background: #fff;

&:after{

content: "";

position: absolute;

right: 8px;

top: calc(50% - 2px); // 2px = hauteur du caret/2

pointer-events: none;

.caret;

}

.form-control{

width: calc(100% + 30px);

background-color: transparent;

background-image: none;

-webkit-appearance: none;

border: none;

box-shadow: none;

padding-right: 36px;

}

&.is-light{

.museo-variant(700);

border-bottom: 1px solid #ddd;

.form-control{

color: @brand-primary;

}

/* saf3+, chrome1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.sexy-select{

padding-right: 24px;

.form-control{

padding-right: 26px;

}

/* IE 10+ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.sexy-select{

.form-control{

width: 200%;

}

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

12/06/2015 / admin

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.

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 ...
        }
    });
});

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 ...

}

});

<!-- 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>

</div>

</div>

<label for="cb_method">Prélèvement CB</label>

<p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>

</div>

<label for="cheque_method">Par chèque</label>

</div>

<label for="sepa_method">Prélèvement SEPA (RIB)</label>

</div>

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

<div class="radio-box">
    <input onclick="[...]" />
</div>

</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.

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 ...
}

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 ...

}

Articles récents

Catégories

Archives

Méta

Étiquette : checkbox

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

[jQuery] Vérifier si au moins une checkbox est cochée

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Code non commenté

Code commenté

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

Case à cocher (checkbox)

Bouton radio

Avec 2 boutons radio seulement

Avec plus que 2 boutons radio

[jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché

Cas un peu plus complexe :

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

[jQuery] Vérifier qu’au moins une checkbox est sélectionnée

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Styler l’élément HTML Select avec CSS

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

Code non commenté

Code commenté

Case à cocher (checkbox)

Bouton radio

Avec 2 boutons radio seulement

Avec plus que 2 boutons radio

Cas un peu plus complexe :

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

Styler l’élément HTML Select avec CSS

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen