使用jQuery检查所有更改icheck的复选框

Question

我正在尝试检查/取消选中secondary checkboxes上的primary checkbox 。 但是我的jQuery函数无法正常工作。

HTML代码：

<table id="tab" class="table">
  <tr>
    <td>
      <input name="feature-1" class="ExtraCheckBox" type="checkbox"> Primary
    </td>
    <td>
      <input name="feature-1" class="ChildCheckBox" type="checkbox"> Secondary
      <input name="feature-1" class="ChildCheckBox" type="checkbox"> Secondary
    </td>
  </tr>
</table>

jQuery代码：

$(document).on('change', '.ExtraCheckBox', function() {
  var checked = $(".ExtraCheckBox").closest('div.icheckbox_square-grey').hasClass("checked");
  console.log(checked);

  if (checked) {
    $("#tab > tr >td.ChildCheckBox").each(function() {
      $(this).prop("checked", true);
    });
  } else {
    $("#tab > tr >td.ChildCheckBox").each(function() {
      $(this).prop("checked", false);
    });
  }

});

请在这里找到js小提琴演示： 链接

有任何建议，请！

Answer 1

您可以直接使用icheck插件提供的回调和方法。

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-grey',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});

$('.ExtraCheckBox').on('ifChecked', function() {

    $(".ChildCheckBox").iCheck('check');

});


$('.ExtraCheckBox').on('ifUnchecked', function() {

    $(".ChildCheckBox").iCheck('uncheck');

});

希望这会有所帮助。 检查我的小提琴版本以获取此http://jsfiddle.net/kajalc/6mmypwgs/

Answer 2

这很简单！ 您的<td>元素都没有 ChildCheckBox类。

尝试以下方法：

$(".ExtraCheckBox").on('click', function() {
  var checked = $(this).is(":checked");

  if (checked) {
    $("input.ChildCheckBox").each(function() {
      $(this).click();
    });
  } else {
    $("input.ChildCheckBox").each(function() {
      $(this).click();
    });
  }
});

看到它在这里工作http://jsbin.com/sawezogiju/edit?html,js,console,output

Answer 3

使用以下代码：

$('input.ExtraCheckBox').on('ifToggled', function(event){
  $('input.ChildCheckBox').iCheck('toggle');
});

将此代码替换为下面的代码：

$(document).on('change', '.ExtraCheckBox', function() {
  var checked = $(".ExtraCheckBox").closest('div.icheckbox_square-grey').hasClass("checked");
  console.log(checked);
------- and so on

这是一个自定义库，它具有自己的事件处理功能。 使用它们。

这是该库和文档的链接 ： link 。

Answer 4

尝试类似的事情。

    $('input.ExtraCheckBox').on('ifClicked', function() {
    var checked=$(this).is(':checked');
    if(checked){
            $('.ChildCheckBox').iCheck('uncheck');
    }else{
            $('.ChildCheckBox').iCheck('check');
    }
});

这是更新的链接： jsfiddle.net/yzyk2dqn/9/