使用 jquery 检查取消选中更改时的所有复选框

Question

我正在尝试 check/uncheck 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 fiddle 演示：Link

有什么建议，请！

Answer 1

这个很简单！ None 个 <td> 个元素有个 class 个 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 2

使用下面的代码：

$('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：link。

Answer 3

尝试类似的方法。

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

这是更新后的 link:jsfiddle.net/yzyk2dqn/9/

Answer 4

您可以直接使用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');

});

希望这会有所帮助。检查我的 fiddle 版本 http://jsfiddle.net/kajalc/6mmypwgs/

使用 jquery 检查取消选中更改时的所有复选框

check all checboxes on change of icheck using jquery

jquery

html

icheck