ICheck jQuery blocks custom scripts

Question

I used "iCheck jQuery" to change the style of the checkbox. But when I add an iCheck script, my onlick method stops working. Why is this happening?

<input id="my_cb" type="checkbox" value="yes_n" onclick="hide_row_metod()"/> <script> $(document).ready(function(){ $('#my_cb').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); }); </script> 

My script:

 <script> function hide_row_metod() { if(document.getElementById('my_cb').checked){ document.getElementById('row1').style.display = "none"; }else{ document.getElementById('row1').style.display = "inline"; } } </script> 

Answer 1

iCheck logs user events that you can listen to. I applied a working example for jsbin , the main difference is this:

 $("#my_cb").on("ifChanged", hide_row_metod); 

There are two events: ifChecked and ifUnchecked . If you want to catch all the changes in your checkbox, you need to either listen to them or just listen to ifChanged . This will work to switch the line since you are testing checked in hide_row_metod .

In my example, I use a block element div#row1 , so after checking and div#row1 it will look different ( inline ).

Also: you have a typo in your method name (missing h ).

Answer 2

I know that some time has passed since this question was asked. I made a script to capture the onclick attribute from each radio / flag and attach it to the corresponding iCheck / iRadio. Just remember to run it AFTER iCheck has been applied. Set a timeout or run it after implementing iCheck:

 $("[class*='icheckbox'],[class*='iradio']").each(function(){ $(this).find("ins").attr("onclick", $(this).find("input").attr("onclick")); }); 

Answer 3

It is probably overridden by the iCheck script. Try using only jQuery:

 $('#my_cb').on('click', function() { $('#row1').css('display', this.checked ? 'none' : 'inline'); });