javascript 功能“全选”和 iCheck

Function "select all" and iCheck

提问by Ivan

I want to implement a "Select all" using iCheck.

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

This is what I've done so far:

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

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

Fiddle: jsfiddle.net/N7uYR/1/

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

I want that when "Check Box 1", "Check Box 2", "Check Box 3", "Check Box 4" are selected, "Select all" also gets selected.

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

Exactly like this: jsfiddle.net/ivanionut/N7uYR/

就像这样：jsfiddle.net/ivanionut/N7uYR/

How can I do this?

我怎样才能做到这一点？

回答by Dzulqarnain Nasir

Here's what I came up with.

这是我想出的。

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

js小提琴

回答by yerlix

For anyone still struggling with this, I've altered the accepted answer https://stackoverflow.com/a/17821003/3061836) from Dzulqarnain Nasir a bit.

对于仍在为此苦苦挣扎的任何人，我已经稍微更改了Dzulqarnain Nasir 的已接受答案https://stackoverflow.com/a/17821003/3061836)。

I've changed the removePropmethod to the propmethod:

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

checkAll.removeProp('checked');

Is altered to

更改为

checkAll.prop('checked', false);

The removePropmethod didn't work for me, but setting the checked property to false worked.

该removeProp方法对我不起作用，但将检查属性设置为 false 有效。

At the time of writing, I'm using iCheck 1.0.2 with jQuery 2.1.4

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

回答by Hamed Khosravi

u can use parent of ur checkboxes to do it. for example

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

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

and using jquery to set attr("checked") or not.

并使用 jquery 设置 attr("checked") 或不设置。

回答by dilettante

In case anyone else stumbles across this issue, the accepted answer wasn't working for me on dynamically generated checkboxes. I found the solution here:

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

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

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