多个 CheckBoxes 根据选中的复选框 + MVC3 + jQuery/Javascript 动态检查取消选中

Question

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

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

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

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

下面是我的 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

Answer 2

试试这个，

$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

case 是添加到其他复选框的类

在线演示访问，
http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/

Answer 3

DEMO

$('input[type="checkbox"][name="Dept"]').change(function () {
    if (this.value == 'ALL') {
        $('input[name="Dept"]').prop('checked', this.checked);
    }
});

Updated Demo with jQuery 1.5.2

$('input[type="checkbox"][name="Dept"][value="ALL"]').change(function () {
    $('input[name="Dept"]').attr('checked', this.checked);
});
$('input[type="checkbox"][name="Dept"]:gt(0)').change(function () {
    if (!this.checked) {
        $('input[name="Dept"][value="ALL"]').removeAttr('checked');
    }
    if ($('input[type="checkbox"][name="Dept"]:gt(0)').length == $('input[type="checkbox"][name="Dept"]:gt(0):checked').length) {
        $('input[type="checkbox"][name="Dept"][value="ALL"]').attr('checked',true);
    }
});

Answer 4

这是一种方法：

$(document).ready(function() {
    var $cbs = $('input[name="Dept"]').click(function() {
        if (this.value==="ALL")
            $cbs.prop("checked", this.checked);
        else if (!this.checked)
            $cbs[0].checked = false;
    });
});

令人瞠目结舌的演示：http://jsfiddle.net/MNbDw/2/

请注意，显然我上面的代码有一个硬编码假设，即“ALL”复选框将是第一个复选框（在我使用$cbs[0] 取消选中它时）。您可以更改 else if 大小写来代替：

$cbs.filter('[value="ALL"]').prop("checked",false);

演示：http://jsfiddle.net/MNbDw/3/

或者改变你的 html 给那个特定的复选框一个 id 或者其他的。

更新：.prop() 方法是在 jQuery 1.6 中引入的。对于 1.5.2 版（如评论中所述），请使用 .attr() 代替，如此处所示（尽管 1.5.2 太旧以至于 jsfiddle 实际上并没有提供它作为选项，所以我不得不在“外部资源”下添加它):http://jsfiddle.net/MNbDw/9/