1

When using customized checbox (i.e., icheck v1.0.1 from the website http://icheck.fronteed.com/), i am not able to use the "onclick" and "onchange" functions that i create manually. I have to use the custom "ifClicked" and "ifChanged" functions that the plugin provides.

Here is my code:-

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="divchkBox">
  <input type="checkbox" id="extEmailChk" name="custEmailChkBox" onchange="foo()"/><br />

</div>
<script>
    function foo(){
        alert("hi");
    }
</script>
</body>
</html>

But the "foo" function doesn't get called. I have to use the custom "ifChanged" function.

<script>

    $('#divchkBox input').on('ifClicked', function (event) {
         alert("hi");
    });
</script>

I have tried to add the "onclick","onchange" functions in many ways but nothing works.

Actually i need to show a confirm box at the click of the checkbox and depending on the confirmation value(i.e., whether the user clicks 'OK' or 'Cancel') toggle or retain the checkbox's checked state. But since i am using this plugin's custom callbacks, even though i set the checked property of the checkbox as checked/unchecked in the 'else' part(i.e., if i click 'Cancel' button) at the end of function call the checkbox's value gets altered instead of getting retained.

Here is the code i am using:-

$('#divchkBox input').on('ifClicked', function (event) {
    var checkbox = document.getElementById("extEmailChk");
    if (checkbox.checked) {
        var result = confirm("Are you sure you DONT want to send email to customer?");
        if (result) {              
            $('#extEmailChk').iCheck('uncheck');               
        }
        else {
            $('#extEmailChk').iCheck('check');
        }
    }
    else {
        var result = confirm("Are you sure you want to send email to customer?");
        if (result) {                
            $('#extEmailChk').iCheck('check');
        }
        else {
            $('#extEmailChk').iCheck('uncheck');
        }
    }
});

I am achieving the functionality i want when i am creating custom methods for the click and change events of the checkbox, but not when i am using the icheck callbacks.

Please help...

FreDP
  • 15
  • 7
  • The events are just `click` and `change`, not `ifClicked`, `onclick` or `onchange`. Try just `.on('change', ..` – Rory McCrossan Nov 28 '16 at 12:02
  • have you included jQuery ? ? ? – Punit Gajjar Nov 28 '16 at 12:03
  • Please show us, what you tried already. Might be the the custom checkbox does not support these events? – Seb Nov 28 '16 at 12:05
  • Changing the title will help "ifClick callback does not work for iCheck.js" or something. I read the source, this is a valid question - but it looks mad due to no context. – Glycerine Nov 28 '16 at 12:12
  • I think the @user7124795 wants to use `onchange` along with the `icheckjs` plugin. But according to the [source](https://github.com/fronteed/icheck/blob/1.x/icheck.js#L228) they are overriding all handlers and users are forced to use the callbacks they provide in their documentation. – sandeep s Nov 28 '16 at 12:50
  • @Punit.... yes i have tried using jquery – FreDP Nov 29 '16 at 11:35
  • @Seb i have tried creating the click and change functions using jquery i.e., $("#extEmailChk").on("click/change",function) – FreDP Nov 29 '16 at 11:45
  • @sandeeps you are right. Can you please suggest a way out of this? – FreDP Nov 29 '16 at 11:48
  • @RoryMcCrossan i tried the way you suggested but still the function doesn't get called – FreDP Nov 29 '16 at 11:49
  • My suggestion would be to use the provided event handlers from the library. As i mentioned before, it looks like the library you are using is **overriding** the callbacks. – sandeep s Dec 02 '16 at 06:13
  • @sandeeps I have used setTimeout(function () { $("#extEmailChk").iCheck('check'); }, 1); to handle the issue. The checkbox gets toggled at the end of the function but it also gets toggled back (as it should) after a second. It is not a perfect solution but for now it solves the problem. – FreDP Dec 05 '16 at 10:22

0 Answers0