Étiquette : .prop()

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

});

Articles récents

Catégories

Archives

Méta

Étiquette : .prop()

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

[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