web-dev-qa-db-ja.com

iCheckjQueryはカスタムスクリプトをブロックします

「iCheckjQuery」を使用してチェックボックスのスタイルを変更しました。しかし、iCheckスクリプトを追加すると、onlickメソッドが機能しなくなります。なぜそれが起こっているのですか？

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

私のスクリプト：

<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>
jqueryonclickicheck
10
T_E_M_A

iCheck リッスンできるカスタムイベントを登録します。 jsbinでの作業例 を載せましたが、主な違いは次のとおりです。

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

2つのイベントがあります： ifCheckedおよびifUnchecked 。チェックボックスへのすべての変更をキャッチする場合は、両方をリッスンするか、単にifChangedをリッスンする必要があります。 hide_row_metodでcheckedをテストしているので、これは行を切り替えるために機能します。

私の例では、ブロック要素div#row1を使用しているため、チェックとチェックを外した後のレンダリングが異なります（inline）。

また、メソッド名にタイプミスがあります（hがありません）。

23
Wolfram

この質問が出されてからしばらく経ちました。各ラジオ/チェックボックスからonclick属性をキャプチャし、対応するiCheck/iRadioにアタッチするスクリプトを作成しました。 iCheckが適用された後に実行することを忘れないでください。タイムアウトを設定するか、iCheckの実装後に実行します。

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

おそらくiCheckスクリプトによってオーバーライドされます。 jQueryのみを使用してみてください。

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