iCheck check if checkbox is checked

Viewed 166965

I am using iCheck plugin for customizing checkboxes. I need to display certain text when one or more checkbox is checked and hide the text when none are checked.

The code I have currently displays the text on first click but doesn't hide it unless I click 2 more times. I have multiple checkboxes and would like to show text if one of 'em are checked else hide the text. Does anybody have any idea? The plugin has:

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

callbacks....Here is the plugin function

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

Here is what I tried..

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

html

<input type="checkbox">
<div class"hide" style="display:none">Hi there</div>
15 Answers

If any one have any interest on multiple icheck(). Then you can go for it with the below one:

$("#mother_checkbox").on("ifChanged", function(){
        if($(this).is(':checked')) {
            $('.child_checkbox').prop('checked', true);
            $('.child_checkbox').iCheck('update');
        }
        else{
            $('.child_checkbox').prop('checked', false);
            $('.child_checkbox').iCheck('update');
        }
});

It will Check/Uncheck all the child checkbox. Good Day !

Use this method:

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

You could wrap all your checkboxes in a parent class and check the length of .checked..

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