iCheck jQuery blocks custom script

T_E_M_A picture T_E_M_A · Jan 25, 2015 · Viewed 20.3k times · Source

I used "iCheck jQuery" to modificate the style of the checkbox. But when i add a iCheck script - my onlick metod stops working. Why it 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

Wolfram picture Wolfram · Jan 25, 2015

iCheck registers custom events you can listen for. I put up a working example on 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 changes to your checkbox, you need to either listen for both or simply listen for ifChanged. This will work to toggle the row, as you are testing for checked in your hide_row_metod.

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

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