代码之家 › 专栏 › 技术社区 › 06011991

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

icheck html jquery

2

06011991 · 技术社区 · 7 年前

我正在尝试选中/取消选中 secondary checkboxes 在检查 primary checkbox

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>

$(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);
    });
  }

});

Link

4 回复 | 直到 7 年前

1

2

Code Lá¦ver Ionut Rusen 7 年前

使用以下代码:

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

2

Kajal 7 年前

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

1

delboy1978uk 7 年前

这个很简单!没有你的 <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

4

1

CCoder 7 年前

试试类似的方法。

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

以下是更新的链接: jsfiddle.net/yzyk2dqn/9/