[javascript] iCheck check if checkbox is checked

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 question is related to javascript jquery checkbox icheck

The answer is


Check this :

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

if(checked) {
  //do stuff
}

Use this method:

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

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 !


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

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

To know if the iCheck box is checked

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

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

this works for me... try it

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


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) {

    }
});

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.


Call

element.iCheck('update');

To get the updated markup on the element


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

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

For those who struggle with this:

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

This directly returns true or false as boolean.


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

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

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to checkbox

Setting default checkbox value in Objective-C? Checkbox angular material checked by default Customize Bootstrap checkboxes Angular ReactiveForms: Producing an array of checkbox values? JQuery: if div is visible Angular 2 Checkbox Two Way Data Binding Launch an event when checking a checkbox in Angular2 Checkbox value true/false Angular 2: Get Values of Multiple Checked Checkboxes How to change the background color on a input checkbox with css?

Examples related to icheck

iCheck check if checkbox is checked