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>

This might give you some direction `:)` http://stackoverflow.com/questions/2660323/jquery-checkboxes-and-ischecked P.S. Post is bit convoluted thought I will paste the `is(':checked')` flag so that you can use it accordingly. flick a jsfiddle I should be able to help you. — Tats_innit, Dec 23 '13 at 02:43

Sercan Ozdemir · Answer 1 · 2019-01-12T09:44:27.090

64

For those who struggle with this:

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

This directly returns true or false as boolean.

edited Jan 12 '19 at 09:44

answered Jan 02 '16 at 07:15

Sercan Ozdemir

4,641
3
34
64

what need to be pass in place of *SELECTOR* here ? – Jay Rathod Jul 27 '17 at 13:29
it's a jquery selector for example if you want to select a class you need to use `.myClass` if you want to select an id then you should use `#myID` – Sercan Ozdemir Jul 27 '17 at 13:31
1

Thanks, this way is also working when checking the input with jquery! – Bassem Shahin Oct 04 '17 at 15:56
1

for me return undefined. `TypeError: Cannot read property 'checked' of undefined` – Jul 16 '18 at 20:17
1

@SercanOzdemir Man you are awesome (y) – Nithee Sep 04 '19 at 15:48

score 34 · Answer 2 · answered Feb 01 '17 at 04:21

34

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);
});

answered Feb 01 '17 at 04:21

grud phunsanit

441
4
4

Mohamed Ramrami · Answer 3 · 2015-12-02T08:59:39.257

21

Check this :

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

if(checked) {
  //do stuff
}

edited Dec 02 '15 at 08:59

answered Nov 06 '15 at 11:36

Mohamed Ramrami

12,026
4
33
49

3

This does not work well. I am collecting the `checked`class state of a lot of iCkeck-boxed, but the code that sets the `check` class is slower than my specific code that reads the class. Thus this method has timing issues and should be avoided. – PIDZB Jun 29 '17 at 12:53

score 15 · Answer 4 · answered Nov 13 '15 at 09:40

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

score 13 · Answer 5 · answered Apr 14 '14 at 15:32

13

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');
});

answered Apr 14 '14 at 15:32

user1883000

231
2
9

30

how the hell is this responding to the quetion? The question was clear how to determine if the checkbox is checked or not, not what `type` of event was raised!! – DATEx2 Oct 28 '15 at 16:17

Ram Pratap · Answer 6 · 2016-06-14T15:46:07.620

10

To know if the iCheck box is checked

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

edited Jun 14 '16 at 15:46

answered Jun 14 '16 at 15:43

Ram Pratap

1,079
11
8

score 7 · Answer 7 · edited May 30 '16 at 15:32

7

I wrote some simple thing:

When you initialize icheck as:

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

Add this code under it:

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

After this you can easily find your original checkbox's state. I wrote this code for using icheck in gridView and accessed its state from server side by C#.

Simply find your checkBox from its id.

edited May 30 '16 at 15:32

Gustavo Morales

2,614
9
29
37

answered May 30 '16 at 14:16

Shakti

723
8
15

2

this is what I was missing from iCheck all the time! Thank you. – mtness Oct 19 '16 at 16:46
1

I would consider to specify the selector to: input[type=checkbox],input[type=radio] – mtness Oct 19 '16 at 16:47

score 5 · Answer 8 · edited May 11 '16 at 09:14

5

Use this code for 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) {

    }
});

edited May 11 '16 at 09:14

Kyll

7,036
7
41
64

answered Apr 21 '16 at 08:03

Abdus Salam Azad

5,087
46
35

score 3 · Answer 9 · answered Nov 18 '15 at 09:35

3

Call

element.iCheck('update');

To get the updated markup on the element

answered Nov 18 '15 at 09:35

Shareef

351
4
12

score 3 · Answer 10 · answered Mar 21 '17 at 06:55

Use following code to check if iCheck is checked or not using single method.

$('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");
    }
});

score 2 · Answer 11 · answered Jan 05 '20 at 06:59

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 !

score 1 · Answer 12 · answered Apr 03 '17 at 07:23

$('input').on('ifChanged', function(event) {
             if($(".checkbox").is(":checked")) {
                $value = $(this).val();
             }

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

maverabil · Answer 13 · 2019-10-04T15:23:08.513

1

Use this method:

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

edited Oct 04 '19 at 15:23

answered Aug 31 '18 at 14:06

maverabil

188
3
16

score 0 · Answer 14 · answered Jun 22 '16 at 20:04

0

this works for me... try it

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

answered Jun 22 '16 at 20:04

Monzur

1,341
14
11

score 0 · Answer 15 · answered Oct 14 '16 at 19:11

0

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();
}

answered Oct 14 '16 at 19:11

shroy

918
2
10
24

iCheck check if checkbox is checked

15 Answers15