Javascript 加上“；选择全部"；复选框到更新对象数组的复选框列表

我有两个复选框列表（稍后会有其他列表），例如：

<ul>
    <li><input type="checkbox" onchange="handleChange()" name="job" rel="it-manager" value="IT-Manager" id="IT Manager" class="selectedId" checked> IT Manager</li>
    <li><input type="checkbox" onchange="handleChange()" name="job" rel="consultant" value="Consultant" id="Consultant" class="selectedId" checked> Consultant</li>
</ul>
<ul>
    <li><input type="checkbox" onchange="handleChange()" name="reg" rel="client" value="Client" id="Client" checked> Client</li>
    <li><input type="checkbox" onchange="handleChange()" name="reg" rel="prospect" value="Prospect" id="Prospect" checked> Prospect</li>
<ul>

makeFilteredArray

函数只是将其放入一个新数组

filteredArray

，用于更新d3地图

function makeFilteredArray(array) {
    var filteredArray = [];
    filteredArray.push(array);

当前，当检查属性值是否匹配时，过滤器返回数组中的对象（使用“和”逻辑）

---

每次更改复选框时，var

filteredArray

都会更新。

获得了一些离线帮助，下面是针对我的特定情况的解决方案。意识到这是一个模糊的、杂乱无章的问题，对我有效的解决方案确实直接回答了这个问题，并且与问题中的代码并不完全相关。考虑删除此问题，但将暂时保留此问题，以防此答案对任何人都有用，作为在多个列表中设置“全选”按钮的起点

setupSelectAll: function () {
    $('.selectedId').change(function () {
        var $input = $(this);

        var $allInputs = $input
            .closest('ul')
            .find('.selectedId');

        var $selectAll = $input.closest('ul').find('.selectAll');

        var totalInputs = $allInputs.length;
        var numberChecked = $allInputs.filter(":checked").length;

        $selectAll.prop('checked', totalInputs === numberChecked);
    });
},

setupChangeHandler: function () {
    var app = this;
    $('.job-role-filter .selectedId, .reg-type-filter .selectedId').change(
        _.debounce(function (){
            var $input = $(this);

            app.updateMap();
            app.updateChart();
        }, 100)
    );

    $('.selectAll').change(function (){
        var $selectAll = $(this);

        $selectAll.closest('ul')
            .find('.selectedId')
            .prop('checked', $selectAll.prop('checked'))
            .change();
    });
},

getCheckedOptions: function () {
    this._checkedOptions = {
        jobRole: $('.job-role-filter input:checked').map(function () {
            return $(this).attr('id');
        }),
        regType: $('.reg-type-filter input:checked').map(function () {
            return $(this).attr('id');
        }),
    };
},

function filterBy(e) {
    return document.getElementById(e.jobRole).checked
    && document.getElementById(e.regType).checked;
}

setupSelectAll: function () {
    $('.selectedId').change(function () {
        var $input = $(this);

        var $allInputs = $input
            .closest('ul')
            .find('.selectedId');

        var $selectAll = $input.closest('ul').find('.selectAll');

        var totalInputs = $allInputs.length;
        var numberChecked = $allInputs.filter(":checked").length;

        $selectAll.prop('checked', totalInputs === numberChecked);
    });
},

setupChangeHandler: function () {
    var app = this;
    $('.job-role-filter .selectedId, .reg-type-filter .selectedId').change(
        _.debounce(function (){
            var $input = $(this);

            app.updateMap();
            app.updateChart();
        }, 100)
    );

    $('.selectAll').change(function (){
        var $selectAll = $(this);

        $selectAll.closest('ul')
            .find('.selectedId')
            .prop('checked', $selectAll.prop('checked'))
            .change();
    });
},

getCheckedOptions: function () {
    this._checkedOptions = {
        jobRole: $('.job-role-filter input:checked').map(function () {
            return $(this).attr('id');
        }),
        regType: $('.reg-type-filter input:checked').map(function () {
            return $(this).attr('id');
        }),
    };
},