如何使用淘汰赛选择列中的所有复选框？

Question

Disclaimer: The environment I'm working in has to be completely inline. The HTML calls to a JS file I am not allowed to edit. That being said, I'm trying to select/deselect all checkboxes in a column when I click the header row. I want to be able to select/deselect any individual row below the header as usual but when I check the header I want EVERY row underneath to select/deselect.

Right now my problem is that selecting the header row only selects or deselects once. So clicking it once unchecks every row but then the functionality stops. For what it's worth the check box doesn't appear in the header row either. That's a different problem though.

The problem resides in the first table row --> label class tag. Any suggestions?

<tbody>
    <tr>
        <td class="feature-name">All</td>
        <!-- ko foreach: $parent.featureHeadings[$index()] -->
        <td data-bind="css:{alt: !($index() % 2)}">
            <label class="multiple-checkboxes">
                <input type="checkbox" data-bind="checked: $parent.dataItems.every(function (acct) { 
                return !acct.features[$index()].isVisible() ||
                acct.features[$index()].value(); }), 
                click: function (data, index, model, event) 
                { 
                var newValue = event.srcElement.checked; 
                data.forEach(function (acct) { 
                if (acct.features[index].isVisible()) 
                    acct.features[index].value(newValue); 
                    }
                    ); 
                    }.bind($data, $parent.dataItems, $index())" />
            </label>
        </td>
        <!-- /ko -->
    </tr>
    <!--  ko foreach: dataItems -->
    <tr>
        <td class="feature-name" data-bind="text: name"></td>
        <!-- ko foreach: features -->
        <td class="setting" data-bind="highlightOverride: isOverridden(), css: { alt: !($index() % 2) }, highlightHelpHint: isHintActive">
        <!-- ko if: type === 'Boolean' -->
        <label class="checkbox" data-bind="css: { checked: value }, fadeVisible: isVisible()"><input type="checkbox" data-bind="checked: value" /></label>
        <!-- /ko -->
        </td>
        <!-- /ko -->
    </tr>
    <!-- /ko -->
</tbody>

Edit: Thank you all for reading. Sorry I could not offer more details to allow you to help me. Here is the final solution.

<label class="multiple-checkboxes" data-bind="css: { checked: $parent.dataItems.every(function (acct) { return !acct.features[$index()].isVisible() || acct.features[$index()].value(); }) }, click: function (data, index, model, event) { var newValue = !event.srcElement.classList.contains('checked'); data.forEach(function (acct) { if (acct.features[index].isVisible()) acct.features[index].value(newValue); }); }.bind($data, $parent.dataItems, $index())">

Answer 1

This works:

<label class="multiple-checkboxes" data-bind="css: { checked: $parent.dataItems.every(function (acct) { return !acct.features[$index()].isVisible() || acct.features[$index()].value(); }) }, click: function (data, index, model, event) { var newValue = !event.srcElement.classList.contains('checked'); data.forEach(function (acct) { if (acct.features[index].isVisible()) acct.features[index].value(newValue); }); }.bind($data, $parent.dataItems, $index())">

I'd like to mark the question as answered but you can see I am new here.