将“全选”复选框添加到更新对象数组的复选框列表中答案

【问题标题】：Add a "Select All" checkbox to lists of checkboxes that update an array of objects将“全选”复选框添加到更新对象数组的复选框列表中
【发布时间】：2015-06-20 02:53:34
【问题描述】：

我有两个复选框列表（后面会有额外的列表），例如：

<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>

Whenever combinations of checkboxes are selected/deselected, an array of objects is filtered.

问题在顶部添加“全选”框的最佳方法是什么？我希望功能就像this example。我已尝试实现该示例，并且复选框功能运行良好，但我似乎无法正确更新过滤器。

我尝试了filteredBy 中的if else 语句，但无济于事。我尝试了一个额外的窗口函数来处理“全选”按钮，但这把事情搞砸了。

我意识到这是一个有点模糊的问题，但我希望也许有人以前遇到过这个问题。我很感激任何可以为我指明正确方向的建议。 JSFIDDLE谢谢！

MORE DETAIL FOR CONTEXT Whenever combinations of checkboxes are selected/deslected onchange in the input tags runs the handleChange() function, which filters an array of objects called sorted and puts the result在 var arrayToFilterUpon 中。它还在该变量上运行一个名为makeFilteredArray 的函数。

window.handleChange = function() {
    arrayToFilterUpon = sorted.filter(filterBy);
    makeFilteredArray(arrayToFilterUpon);
}

makeFilteredArray 函数只是将其放入一个新数组 filteredArray 中，用于更新 d3 映射。

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

目前，过滤器在检查属性值匹配时返回数组中的对象（使用“and”逻辑）。

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

每次更改复选框时，var filteredArray 都会更新。

【问题讨论】：

标签： javascript jquery checkbox d3.js

【解决方案1】：

得到了一些离线帮助，我的特殊情况的解决方案如下。意识到这是一个模糊而庞大的问题，对我有用的解决方案确实直接回答了它，并且与问题中的代码不完全相关。考虑仅删除此问题，但现在将其保留，以防此答案对任何人有用，作为在多个列表中设置全选按钮的起点。

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

【讨论】：