1

我有一个带有复选框的 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"/>
4

4 回答 4

1

演示

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

使用 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);
    }
});
于 2013-08-07T02:23:55.310 回答
1

尝试这个，

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

case添加到其他复选框的类在哪里

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

于 2013-08-07T02:26:04.883 回答
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 小提琴

jQuery 1.4.4 小提琴

于 2013-08-07T02:17:56.413 回答
1

这是一种方法：

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

于 2013-08-07T02:19:57.110 回答