使用jquery检查所有取消选中的复选框答案

【问题标题】：check all checboxes on change of icheck using jquery使用jquery检查所有取消选中的复选框
【发布时间】：2017-08-03 11:29:26
【问题描述】：

我正在尝试在primary checkbox 的支票上选中/取消选中secondary checkboxes。但是我的 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

任何建议，请！

【问题讨论】：

$(this).iCheck('check');和 $(this).iCheck('uncheck');应该有帮助
github.com/fronteed/icheck#methods
@MehravishTemkar：检查参考链接。

标签： jquery html icheck

【解决方案1】：

使用下面的代码：

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

【讨论】：

点击复选框时，checked 类将添加到 div 标记。我试过你的功能它不起作用:(
很高兴为您提供帮助

【解决方案2】：

您可以直接使用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/

【讨论】：

【解决方案3】：

这个很简单！您的<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

【讨论】：

您的 jquery 代码工作正常，请检查更新的小提琴链接 [此处][1] 问题出在 iCheck 插件上。我认为这不是对click 或change 事件的响应。 [1]：jsfiddle.net/yzyk2dqn/3
@MayankPandeyz：对于普通的复选框，我的 jquery 函数正在工作，但 icheck 复选框却没有：(。有什么建议吗？
我不知道 iCheck 复选框是什么，但我猜它是一个使用 CSS 和标签并隐藏正常外观框的精美复选框。检查元素，您可能会发现标记与源代码不同！
@delboy1978uk：它适用于普通复选框，但不适用于此 icheck 复选框。我正在努力解决这个问题
是的，所以检查元素，生成的 HTML 是否与您的 HTML 源相同？

【解决方案4】：

尝试类似的方法。

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

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

【讨论】：