javascript - 功能“全选”和 iCheck

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方法对我不起作用，但将选中的属性设置为 false 有效。

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

Answer 3

你可以使用你的复选框的父级来做到这一点。例如

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

并使用 jquery 设置 attr("checked") 与否。

Answer 4

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

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