web-dev-qa-db-fra.com

iCheck vérifie si la case à cocher est cochée

J'utilise le plugin iCheck pour personnaliser les cases à cocher. Je dois afficher certains textes lorsque une ou plusieurs case à cocher est cochée et masquer le texte lorsque rien n'est coché. 

Le code que j'ai actuellement affiche le texte au premier clic mais ne le cache pas sauf si je clique deux fois de plus. J'ai plusieurs cases à cocher et je voudrais montrer du texte si l’un d’eux est coché, sinon cacher le texte . Quelqu'un at-il une idée? Le plugin a:

ifChecked
ifChanged
ifClicked
ifUnchecked
ifToggled
ifDisabled
ifEnabled.......

callbacks .... Voici la fonction plugin 

$('input').iCheck({ 
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});

Voici ce que j'ai essayé ..

$('input').on('ifChecked', function(event){
$(".hide").toggle();
});

html

<input type="checkbox">
<div class"hide" style="display:none">Hi there</div>
javascriptjquerycheckboxicheck
45
user3006683

Pour ceux qui luttent avec ceci:

const value = $('SELECTOR').iCheck('update')[0].checked;

Ceci retourne directement true ou false sous la forme boolean.

49
Sercan Ozdemir

vous pouvez obtenir la valeur de la case à cocher et le statut par 

$('.i-checks').on('ifChanged', function(event) {
    alert('checked = ' + event.target.checked);
    alert('value = ' + event.target.value);
});
22
grud phunsanit

Vérifie ça :

var checked = $(".myCheckbox").parent('[class*="icheckbox"]').hasClass("checked");

if(checked) {
  //do stuff
}
20
Mohamed Ramrami

Il vous suffit d’utiliser les rappels de la documentation: https://github.com/fronteed/iCheck#callbacks

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});
14
user1883000

Tous les rappels et fonctions sont documentés ici: http://fronteed.com/iCheck/#usage

$('input').iCheck('check'); — change input's state to checked
$('input').iCheck('uncheck'); — remove checked state
$('input').iCheck('toggle'); — toggle checked state
$('input').iCheck('disable'); — change input's state to disabled
$('input').iCheck('enable'); — remove disabled state
$('input').iCheck('indeterminate'); — change input's state to indeterminate
$('input').iCheck('determinate'); — remove indeterminate state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove all traces of iCheck
9
Evalds Urtans

J'ai écrit quelque chose de simple:

Lorsque vous initialisez icheck en tant que:

$('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
});

Ajoutez ce code en dessous:

$('input').on('ifChecked', function (event){
    $(this).closest("input").attr('checked', true);          
});
$('input').on('ifUnchecked', function (event) {
    $(this).closest("input").attr('checked', false);
});

Après cela, vous pouvez facilement trouver l’état de votre case à cocher originale . J’ai écrit ce code pour utiliser icheck dans gridView et accédé à son état côté serveur par C #.

Il suffit de trouver votre checkBox à partir de son id .

6
Sunny

Pour savoir si la case iCheck est cochée

var isChecked = $("#myicheckboxid").prop("checked");
5
Ram Pratap

Utilisez ce code pour iCheck: 

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChanged', function(e) {
    // Get the field name
    var isChecked = e.currentTarget.checked;

    if (isChecked == true) {

    }
});
4
Abdus Salam Azad

Appel

element.iCheck('update');

Pour obtenir le balisage mis à jour sur l'élément

3
Shareef

Utilisez le code suivant pour vérifier si iCheck est coché ou pas en utilisant une seule méthode.

$('Selector').on('ifChanged', function(event){

    //Check if checkbox is checked or not
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");
    }else{
        alert("un-checked");
    }
});
2
Imran Ali
$('input').on('ifChanged', function(event) {
             if($(".checkbox").is(":checked")) {
                $value = $(this).val();
             }

             else if($(".checkbox").is(":not(:checked)")) {
                $value= $(this).val();
             }
        });
1
User0706

Vous pouvez envelopper toutes vos cases dans une classe parent et vérifier la longueur de .checked ..

if( $('.your-parent-class').find('.checked').length ){
  $(".hide").toggle();
}
0
shroy

cela fonctionne pour moi ... essayez-le

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

0
Monzur

Utilisez cette méthode:

$(document).on('ifChecked','SELECTOR', function(event){
  alert(event.type + ' callback');
});
0
maverabil