javascript - 如何根据文本内容选择复选框？

Question

我有一个带有多个复选框的表格。在 JavaScript/JQuery 中，我想根据表数据中的文本内容选择所有这些，但只选择几个。因此，它应该选择所有复选框，除非文本内容等于“899”等。这是我目前所拥有的:

$('#select-all').click(function (event) {
    if (this.checked) {
        var items = document.getElementsByClassName('col-store_number');
        for (var i = 0; i < items.length; i++) {
            if (items[i].textContent === 899) {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    }
});

当我选中全选框时，它没有选择任何内容，因此很可能使它们全部为假，而不仅仅是 899 。我做了一个 console.log(items[i].textContent);它确实返回了正确的值，所以我得到了正确的文本内容。

这是表格的样子 -

<td class="col-store_number">899</td>

这是复选框 -

<input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked">

Answer 1

(我在这里删除了我的第一次错误尝试)

第二个版本是:

如果在包含文本的单元格紧随其后的单元格中找到该复选框，则您应该执行以下操作(已编辑 - 现在所有操作都“在一行中”完成):

$('#select-all').click(function () {
    $('td.col-store_number:not(:contains(899))')
      .next().find('input:checkbox').prop('checked', this.checked)
});

稍微改进的第三个版本在这里(工作演示，使用 ES6 代码):

$('#select-all').click(function () {
   $('td.col-store_number')
      .filter((i,el)=>el.textContent!='899')
      .parent().find('input:checkbox')
      .prop('checked', this.checked)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
master switch:<input type="checkbox" id="select-all" checked="checked">
<table>
<tr><td class="col-store_number">899</td><td>Some other content</td><td><input type="checkbox" name="" value="94" id="id_90" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">4711</td><td>and more content</td><td><input type="checkbox" name="" value="94" id="id_91" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>other content</td><td><input type="checkbox" name="" value="94" id="id_92" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">0815</td><td>yet some more</td><td><input type="checkbox" name="" value="94" id="id_93" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>here too</td><td><input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked"></td><td>Just for the sake of it</td></tr>
<tr><td class="col-store_number">007</td><td>yeah, and here.</td><td><input type="checkbox" name="" value="94" id="id_95" class="checkbox admin__control-checkbox" checked="checked"></td><td>there can be text here too ...</td></tr>
<tr><td class="col-store_number">53</td><td>I am</td><td><input type="checkbox" name="" value="94" id="id_96" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>getting tired</td><td><input type="checkbox" name="" value="94" id="id_97" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">1899</td><td>of this</td><td><input type="checkbox" name="" value="94" id="id_98" class="checkbox admin__control-checkbox" checked="checked"></td><td>extra checkbox:</td></tr>
<tr><td class="col-store_number">8995</td><td>...</td><td><input type="checkbox" name="" value="94" id="id_99" class="checkbox admin__control-checkbox" checked="checked"></td><td><input type="checkbox" checked="checked"></td></tr>
</table>

这个最新版本对表格布局的容忍度更高:它查找文本内容与 899 不同的“col-store_number”类的所有单元格，并设置/取消设置刻度线对于在同一表格行中找到的所有复选框。