Question

免责声明：我正在工作的环境必须完全内联。 HTML调用JS文件我不允许编辑。话虽这么说，当我点击标题行时，我正在尝试选择/取消选择列中的所有复选框。我希望能够像往常一样选择/取消选择标题下面的任何单独的行，但是当我检查标题时，我希望下面的每一行都选择/取消选择。

现在我的问题是选择标题行只选择或取消选择一次。因此，单击它会取消选中每一行，但功能会停止。对于它的价值，复选框也不会出现在标题行中。但这是一个不同的问题。

问题出在第一个表格行 - ＆gt;标签类标签。有什么建议吗？

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

编辑：谢谢大家的阅读。对不起，我无法提供更多详细信息，以便您帮助我。这是最终的解决方案。

<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

这有效：

<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())">

我想将问题标记为已回答，但您可以看到我是新来的。

如何使用knockout选择列中的所有复选框？

1 个答案: