search

drgullin / icheck

Highly customizable checkboxes and radio buttons (jQuery & Zepto)
http://fronteed.com/iCheck
7.39k stars 1.63k forks source link

onchange not triggered #354

Closed puggan closed 3 years ago

puggan commented 7 years ago

The onchange of a input don't trigger when its value is changed.

<html>
    <head>
        <title>onchange() test</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="icheck.js"></script>
        <link href="skins/square/green.css" rel="stylesheet" />
    </head>
    <body>
        <form action="?" method="get">
            <label><input type="radio" name="r" onchange="alert('A');" checked="checked" /><span>A</span></label>
            <label><input type="radio" name="r" onchange="alert('B');" /><span>B</span></label>
        </form>
        <script type="text/javascript">
            $('input').iCheck(
                {
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                }
            );
        </script>
    </body>
</html>
puggan commented 7 years ago

This workaround worked ok

            $('input').on(
                'ifToggled',
                function(e)
                {
                    if(e.currentTarget.checked)
                    {
                        if ("createEvent" in document)
                        {
                            var evt = document.createEvent("HTMLEvents");
                            evt.initEvent("change", false, true);
                            e.currentTarget.dispatchEvent(evt);
                        }
                        else
                        {
                            e.currentTarget.fireEvent("onchange");
                        }
                    }
                }
            );
Zyten commented 7 years ago

For want of a JQuery solution, you could go with this:

$('input').iCheck(
{
  checkboxClass: 'icheckbox_square-green',
  radioClass: 'iradio_square-green',
}).on('ifChecked', function() {
  $(this).trigger("change");
});
2gen commented 5 years ago

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.

drgullin commented 3 years ago

@puggan @Zyten @2gen this is supported now, see v1.0.3 release.