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

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”的所有单元格，并设置/取消设置在同一表格行中找到的所有复选框的刻度线标记。

Answer 2

这是工作示例：

https://codebrace.com/editor/b1da3a821

你应该使用textContent 来获取输入类型中的值，而不是value。该值通常为字符串格式。

$(document).ready(function () {
    $('#select-all').click(function (event) {
        var items = document.getElementsByClassName('col-store_number');

        for (var i = 0; i < items.length; i++) {
            if (items[i].value == "899") {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    });
});

或者你可以使用parseInt(items[i].value) === 899，如果你真的想用Integer检查值。

我希望你期待这个！ :)