Question

我正在检查secondary checkboxes检查/取消选中primary checkbox。但我的jquery功能不起作用。

HTML code：

<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小提琴演示：Link

请提出任何建议！

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/

使用jquery检查更改icheck的所有checbox

4 个答案: