web-dev-qa-db-fra.com

Boîte radio, obtenez la valeur cochée [iCheck]

Boîte de radio de base

<div class="adv_filter">
    <li>
        <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
    </li>
        <li>
            <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
    </li>
</div>

transformation iCheck

<!-- iCheck output format
<div class="adv_filter">
    <li>
        <div class="iradio_square-orange checked" aria-checked="true" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li>

        <li>
            <div class="iradio_square-orange" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li>

</div> -->

Comme vous le voyez, la case cochée est attachée au div ..

    $(document).ready(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-orange',
            radioClass: 'iradio_square-orange',
            increaseArea: '20%' // optional
        });
        $("li").on("click", "input", function () {
            var val = $(this).val();
            //updateDataGrid(val);
            alert(val);
        });

    });

Question et description 

Le code javascript fourni fonctionnait correctement avant l'ajout du plug-in icheck, je me demande comment obtenir le même résultat dans le plug-in icheck. C'est simple, c'est un clic radio qui stocke la valeur dans une variable plus tard. 

Exemple en direct: http://jsfiddle.net/9ypwjvt4/

iCheck: http://fronteed.com/iCheck/

jqueryicheck
10
Kavvson

Associez un gestionnaire à l'événement ifChanged:

$('input').on('ifChecked', function(event){
  alert($(this).val()); // alert value
});

Il y a 11 façons d'écouter les changements :

  • ifClicked - l'utilisateur a cliqué sur une entrée personnalisée ou sur une étiquette attribuée
  • ifChanged - l'état de l'entrée vérifié, désactivé ou indéterminé est modifié
  • ifChecked - l'état de l'entrée est changé en vérifié
  • ifUnchecked - l'état coché est supprimé
  • ifToggled - l'état vérifié de l'entrée est modifié
  • ifDisabled -put l'état est changé en désactivé
  • ifEnabled - l'état désactivé est supprimé
  • ifIndeterminate - l'état de l'entrée est modifié en indéterminé
  • ifDeterminate - l'état indéterminé est supprimé
  • ifCreatedinput - est juste personnalisé
  • ifDestroyed - la personnalisation est simplement supprimée

JSFIDDLE

20
Ionică Bizău

Évitez d’utiliser jquery autant que vous le pouvez .. Vous pouvez également utiliser le code ci-dessous;

$('input').on('ifChecked', function(event){
    alert(event.target.value); // alert value
});
6
Abiodun Arowolo

Utilisez ceci

// Check #x
$( "#x" ).prop( "checked", true );
 
// Uncheck #x
$( "#x" ).prop( "checked", false );

0
Monzur