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

Add a "Select All" checkbox to lists of checkboxes that update an array of objects

本文关键字：复选框 数组 对象 列表 更新 全选 添加      更新时间：2023-09-26

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

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

每当选中/取消选中复选框组合时，都会过滤对象数组。

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

我在filteredBy中尝试过if else陈述，但无济于事。我已经尝试了一个额外的窗口函数来处理"全选"按钮，但这把事情搞砸了。

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

有关上下文的更多详细信息 每当选中/取消复选框组合onchange输入标记时，都会运行handleChange()函数，该函数过滤名为 sorted 的对象数组并将结果放入 var arrayToFilterUpon 中。它还在该变量上运行一个名为 makeFilteredArray 的函数。

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

makeFilteredArray函数只是将其放入用于更新 d3 映射的新数组filteredArray。

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都会更新。

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

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