Question

我想使用iCheck实现“全选”。

这是我到目前为止所做的：

$(function () {
    $('input').iCheck();
    $('input.all').on('ifChecked ifUnchecked', function(event) {
        if (event.type == 'ifChecked') {
            $('input.check').iCheck('check');
        } else {
            $('input.check').iCheck('uncheck');
        }
    });
    $('input.check').on('ifUnchecked', function(event) {
        $('input.all').iCheck('uncheck');
    });
});

小提琴：jsfiddle.net/N7uYR/1/

我希望当选中“复选框1”，“复选框2”，“复选框3”，“复选框4”时，“全选”也会被选中。

完全相同：jsfiddle.net/ivanionut/N7uYR/

我该怎么做？

Answer 1

这就是我想出来的。

$(function () {
    var checkAll = $('input.all');
    var checkboxes = $('input.check');

    $('input').iCheck();

    checkAll.on('ifChecked ifUnchecked', function(event) {        
        if (event.type == 'ifChecked') {
            checkboxes.iCheck('check');
        } else {
            checkboxes.iCheck('uncheck');
        }
    });

    checkboxes.on('ifChanged', function(event){
        if(checkboxes.filter(':checked').length == checkboxes.length) {
            checkAll.prop('checked', 'checked');
        } else {
            checkAll.removeProp('checked');
        }
        checkAll.iCheck('update');
    });
});

jsFiddle

Answer 2

对于仍在努力解决这个问题的人，我已经从Dzulqarnain Nasir那里改变了接受的答案https://stackoverflow.com/a/17821003/3061836）。

我已将removeProp方法更改为prop方法：

checkAll.removeProp('checked');

改为

checkAll.prop('checked', false);

removeProp方法对我没有用，但将checked属性设置为false有效。

在撰写本文时，我正在使用iCheck 1.0.2和jQuery 2.1.4

Answer 3

你可以使用ur复选框的父级来执行此操作。例如

<div class='allchecked'>
<input type="checkbox"/>
<input type="checkbox"/>

并使用jquery设置attr（“checked”）或不设置。

Answer 4

如果其他人偶然发现了这个问题，那么在动态生成的复选框中，我接受的答案对我不起作用。我在这里找到了解决方案：

https://github.com/fronteed/iCheck/issues/44

功能“全选”和iCheck

4 个答案: