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

jsフィドル

Answer 2

まだこれに苦労している人のために、受け入れられた回答https://stackoverflow.com/a/17821003/3061836 ) を Dzulqarnain Nasir から少し変更しました。

removePropメソッドを次のメソッドに変更しましたprop。

checkAll.removeProp('checked');

に変更されます

checkAll.prop('checked', false);

このremoveProp方法はうまくいきませんでしたが、checked プロパティを false に設定するとうまくいきました。

執筆時点では、jQuery 2.1.4 で iCheck 1.0.2 を使用しています。

Answer 3

u urチェックボックスの親を使用してそれを行うことができます。例えば

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

jquery を使用して attr("checked") を設定するかどうか。