icheck checkboxes do not fire change events when toggled?

[brocatus]

I have a handler for the change event on a checkbox input. When icheck is applied to that checkbox the handler is not called when clicking the checkbox. I also note that the state (checked) is not transferred / registered at the input level, only at the enclosing div. Can check be used with jQuery handlers on the regular checkbox events?

[nikpachoo]

+1. It's really strange that a native event is not called.

[ronnyandre]

+1

[felipepodesta]

+1

[ivantcholakov]

+1

[ianvink]

+1

[davidjahns]

+1

[AndrewEastwood]

+1 it's must be high priority to be fixed because that's core event and many libs are watching that change event

[AndrewEastwood]

hey @fronteed , do you still maintain the project?

[AndrewEastwood]

and, to temporary bypass this problem:

$('input').on('ifChanged', function (event) { $(event.target).trigger('change'); });

:grinning:

[gtrias]

+1

[martijndwars]

+1

[mnoble01]

+1

This code worked to trigger the native events in Chrome: $('input').on('ifClicked', function (ev) { $(ev.target).click() })

But this same code did nothing in Firefox.

@AndrewEastwood's ifChanged code worked in both.

[mayurmehta]

You can use

// For oncheck callback $('#checkbox_id').on('ifChecked', function () { //Do your code })

// For onUncheck callback $('#checkbox_id').on('ifUnchecked', function () { //Do your code })

It's working for me. Thanks

[abdulkholid]

I use this. It works. $('input').on('ifChecked', function(event){ alert(event.type + ' callback'); });

I got this from here : http://icheck.fronteed.com/

[camohub]

This is insane! That has to bee the first sentence in documentation. Plugin does not trigger native onchange event. WTH?

[tziporaziegler]

@AndrewEastwood's solution for some reason didn't work for me. I instead used the following code as a workaround to this issue:

$("input[type='checkbox']").on('ifChanged', function (e) {
    $(this).val(e.target.checked == true);
});

[Praneshjs]

This is not my own code, but i am using it, it works fine function pageLoad(sender, args) { $(document).ready(function () { $('.iCheck-helper').on('click', function (event) { var mapper = $(this).siblings().find('input[type=radio]'); $('#' + $(mapper.prevObject).attr('id')).trigger("click"); }); }); }

[grammophone]

This is what i do to remedy the situation transparently, ie to fire the changed event as required by the standard and the frameworks that expect it:

var checkboxes = $("#myForm").find(".icheck input[type=checkbox]");

checkboxes.on('ifChecked ifUnchecked', function (event) {
  $(event.target).change();
});

[hanetooth]

+1

[jimigrunge]

+1 Is this project even supported anymore?

[iamsolarplexus]

No, I don't think so. Check out uniform.js. It seems to have more recent life and will support hundreds of elements per page.

[mostafiz57]

Working for me $('.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) {

}

});

[nathanjosiah]

@mostafiz57 Yes it works (mostly) but the issue with that as well the proprietary events is that now my codebase is tied to a plugin with no way to naturally abstract it. For a comparable example, I can swap out my select2 implementation at any time and virtually none of my code has to change. Also, any other devs that work on the code don't have to know or learn any custom events or handling like what has to be done here.

[holyfalcon]

@mayurmehta realy realy thank you. that's work. I wish I'd seen your comment earlier.

[fdivrusa]

+1

[Juuuke]

+1

[pitchart]

+1

[horror]

+1

[alejandroortiz1961]

I fixed this issue by applying the element class used to initialize iCheck to EACH INDIVIDUAL CHECKBOX input, not just to the containing div. Works perfectly now. Hope this helps someone else.

[webmastervishal]

This solution is working fine in jQuery, but I am using it in React JS project, native event isn't fired

Inside jquery file

$("#testcheckbox").on('ifChecked', function(e) {
    $(e.target).trigger('change');
});

Inside React Component <input type="checkbox" id="testcheckbox" className="icheck" onChange={this.handleCheckBoxChange} />

[2gen]

I used: $(".i-checks").on('ifToggled', function(e) { $(e.target).trigger('change'); }); If you use "ifChecked" that'll only trigger the change event when the checkbox is checked. But not when it is unchecked. ifToggled does both.

[nhantam]

$('#input[type="radio"].minimal').on('ifChecked', function(event){
    var service_type = event.target.value;
    // code your control
});

[mwinamu]

+1

[tripflex]

In my situation the checkboxes were wrapped inside another div that had a class that started with icheckbox_ so I adapted @grammophone code:

/**
 * Fix for iCheck lib not triggering change event
 * @see https://github.com/fronteed/icheck/issues/244
 * @type {jQuery}
 */
var iCheck_cbs = $( ".some-form" ).find( "[class^='icheckbox_'] input[type=checkbox]" );
iCheck_cbs.on( 'ifChecked ifUnchecked', function ( event ) {
    $( event.target ).change();
});

Why this is not natively done by this plugin -- is beyond me, this is basic stuff.

[drgullin]

Thanks everyone, this issue will be fixed in 1.0.3.

[drgullin]

Thanks everyone! 👍

This is now supported by default, fixed with https://github.com/dargullin/icheck/commit/6f311edd715b1e8936419fccb2de17efa9948255.

[dewelloper]

Are you sure?