选择窗体中作用于两个不同下拉框的所有复选框

Select all checkbox acting on two different drop downs in the form

本文关键字：复选框 两个 作用于 窗体 选择      更新时间：2023-09-26

我在一个表单中有两个菜单，每个菜单中都有一个"select all"复选框。但是，单击其中一个会影响两个菜单。

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

我怎样才能把这两个格式相同的列表分开呢?

为每个复选框容器的选择器添加一个上下文。假设您想要操作的复选框组包含在与每个select all复选框相同的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);
...

为所有的$(':checkbox')添加class过滤器

 // 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;
            });
        }
    });
相关文章：