iCheck jQuery blocks custom script

北城以北 提交于 2019-12-06 21:47:27

问题


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>

回答1:


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).




回答2:


I know it's been some time since this question has been asked. I've made a script to capture onclick attribute from each radio / checkbox and attach it to its corresponding iCheck / iRadio. Just remember to run it AFTER iCheck has been applied. Set a timeout or run it after iCheck's implementation:

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



回答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');
});


来源:https://stackoverflow.com/questions/28138043/icheck-jquery-blocks-custom-script

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!