iCheck check if checkbox is checked

Question

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>

Solution 1

For those who struggle with this:

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

This directly returns true or false as boolean.

Solution 2

you can get value of checkbox and status by

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

Solution 3

Check this :

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

if(checked) {
  //do stuff
}

Solution 4

All callbacks and functions are documented here: 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

Solution 5

You just need to use the callbacks, from the documentation: https://github.com/fronteed/iCheck#callbacks

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

View more solutions