Question

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

当我选择ALL时，应检查其他复选框{HR，FINANCE，IT，SALES}

当我取消选择ALL时，其他复选框{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＆gt; 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

这是一种方法：

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

Jawdroppingly good demo：http://jsfiddle.net/MNbDw/2/

请注意，显然我的上面的代码有一个硬编码的假设，即“ALL”复选框将是第一个（在我使用$cbs[0]取消选中它的位置）。您可以更改else if案例来执行此操作：

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

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

或者更改你的html，给那个特定的复选框一个id或者其他什么。

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

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

试试这个，

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

其中case是添加到复选框

的类

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

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

4 个答案: