Question

我在一个表单中有两个菜单，每个表单中都有一个“全选”复选框。但是，单击一个会影响两个菜单。

<div id="drop-wrapper">
    <input type="checkbox" name="select-all-cat" id="select-all-cat" /><label for="cities-label" class="categories-label">Select all</label><br>

这是第二个：

<div class="test-label">
    <input type="checkbox" name="select-all" id="select-all"><label class="categories-label">Select all</label><br>

和javascript：

 // Select all
$('#select-all').click(function(event) {
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;
            });
    }
    else {
        $(':checkbox').each(function() {
            this.checked = false;
            });
        }
    }); 


// Select all categories
$('#select-all-cat').click(function(event) {
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;
            });
    }
    else {
        $(':checkbox').each(function() {
            this.checked = false;
            });
        }
    });

如何将两个列表分开，这两个列表的格式相同？

Answer 1

为所有$（＆＃39;：复选框＆＃39;）

添加类过滤器

 // Select all
    $('#select-all').click(function(event) {
        if(this.checked) {
            $('input:checkbox[class=select-all]').each(function() {
                this.checked = true;
                });
        }
        else {
            $('input:checkbox[class=select-all]').each(function() {
                this.checked = false;
                });
            }
        }); 


// Select all categories
$('#select-all-cat').click(function(event) {
    if(this.checked) {
        $('input:checkbox[class=select-all-cat]').each(function() {
            this.checked = true;
            });
    }
    else {
        $('input:checkbox[class=select-all-cat]').each(function() {
            this.checked = false;
            });
        }
    });

Answer 2

向匹配每个复选框容器的选择器添加上下文。假设您要操作的复选框组包含在与每个复选框相同的div中：

$('#select-all').click(function(event) {
    if(this.checked) {
        $(':checkbox', '.test-label').prop('checked', true);
...
$('#select-all-cat').click(function(event) {
    if(this.checked) {
        $(':checkbox', '#drop-wrapper').prop('checked', true);
...

选择表单中两个不同下拉列表的所有复选框

2 个答案: