javascript - Multieple CheckBoxes 根据选中的复选框动态选中取消选中 + MVC3 + jQuery/Javascript

Question

我有一个带有复选框的 HTML 表单，如下所示，

当我选择全部时，应该选中其他复选框 {HR、FINANCE、IT、SALES}

当我取消选择 ALL 时，其他复选框 {HR、FINANCE、IT、SALES} 应该取消选中

当所有内容都被选中并且其中一个复选框{HR, FINANCE, IT, SALES} 未被选中时，ALL 应该被取消选中

下面是我的 HTML 标记....我怎样才能使用 jQuery/javascript 实现它？？？？

<input type="checkbox" name="Dept" value="ALL"/>

<input type="checkbox" name="Dept" value="HR"/>

<input type="checkbox" name="Dept" value="FINANCE"/>

<input type="checkbox" name="Dept" value="IT"/>

<input type="checkbox" name="Dept" value="SALES"/>

Answer 1

试试这个

jQuery > 1.6

// Cache the selectors as they are being multiple times
var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    // Set the other inputs property to the all checkbox 
    $inputs.not(this).prop('checked', this.checked);
});

// Change event for all other inputs
$inputs.not($all).change(function () {
    var $others = $inputs.not($('input[value=ALL]'));

    // Get the checked checkboxes
    var $checked = $others.filter(function () {
        return this.checked;
    });
    // If length is not equal then uncheck the All checkbox
    if ($others.length !== $checked.length) {
        $all.prop('checked', false);
    }
});

jQuery 1.4.4

var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    var allChk = this;
    $inputs.each(function() {
        this.checked = allChk.checked;
    });
});

$inputs.not($('input[value=ALL]')).change(function () {

    var $others = $inputs.not($('input[value=ALL]'));

    var $checked = $others.filter(function () {
        return this.checked;
    });
    if ($others.length !== $checked.length) {
        $all[0].checked = false;
    }
});

jQuery > 1.6 Fiddle

jQuery 1.4.4 Fiddle