Javascript 使用jquery icheck插件显示隐藏div

我使用“美化”选择/复选框。现在我需要使用

jquery

在选中复选框后显示/隐藏

div
，但这不适用于icheck插件

$('input').on('ifChanged', function(event){
     $('.max_tickets').toggle(this.checked);
});

HTML:

我怎样才能解决这个问题

注意：如果禁用icheck插件，jquery显示/隐藏工作，但启用icheck后jquery不工作。

我刚刚检查了您为iCheck插件提供的链接。它与复选框的交互方式是使用div包装复选框，并添加其他项目和一些样式，因此您的
$（此）。下一步（'.max_tickets'）
选择器将不再作为新的父项工作

插件转换这个

<li>
   <input tabindex="1" type="checkbox" id="input-1">
   <label for="input-1">Checkbox, <span>#input-1</span></label>
</li>

应该对你有用

显然，iCheck也会覆盖默认事件。请尝试使用以下活页夹

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

您可以在ICheck插件中定义回调

$('input').on('ifChanged', function(event){
     $('.max_tickets').toggle(this.checked);
});

您必须使用：

输入的已检查、已禁用或不确定状态已更改

事件由插件启动，考虑插件通过添加其元素来更改DOM，从而启动HTML结构发生了变化。
在插件调用之后，您的元素将不会有一个名为
.max\u tickets
的兄弟，但它是其父元素的兄弟

代码：

Demo:
为了添加，只有在调用iCheck（）之后才能添加此代码方法，否则它将不会以相反的顺序工作。如果是单选按钮，则应传递“ifChecked”而不是“ifchange”，否则将调用函数两次：一次用于选中单选按钮，另一次用于取消选中单选按钮。但是，对于当前场景，ifChanged效果最好。
   <div class="check_container">
       <input tabindex="5" type="checkbox" id="minimal-checkbox-1">test
       <div class="max_tickets">
           <input type="text" name="opwp_wootickets[tickets][0][maxtickets]" />
       </div>
    </div>


$('input[type="checkbox"]').change(function(){
    $(this).parent("div.check_container").find('.max_tickets').toggle(this.checked);
}).change();

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

$('input').on('ifChanged', function(event){
     $('.max_tickets').toggle(this.checked);
});

$('input').on('ifChanged', function () {
    $(this).parent().next('.max_tickets').toggle(this.checked);
});