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

【问题标题】：How to select checkboxes based on text content?如何根据文本内容选择复选框？
【发布时间】：2018-09-01 08:25:32
【问题描述】：

我有一个带有多个复选框的表格。在 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">

【问题讨论】：

当我添加引号或使用 parseInt 时它仍然做同样的事情
请分享 html ，无法知道items[i].textContent 是什么意思，因为您要获取复选框的文本
我认为问题实际上是选中了该框，而不是 if 声明。看这里：stackoverflow.com/questions/426258/…
我已经用表格信息更新了我的问题。
请分享部分html表格与练习的相关数据

标签： javascript checkbox checked

【解决方案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”类单元格，并设置/取消设置在同一表格行。

【讨论】：

当我尝试这个时，“全选”复选框只会选择或取消选择自己。它不会影响其他复选框。
不，一个复选框——像所有<input>元素一样——是一个empty element；因此它不能包含文本或其他任何内容。

【解决方案2】：

下面是工作示例：

https://codebrace.com/editor/b1da3a821

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

$(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;
            }
        }
    });
});

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

我希望你期待这个！ :)

【讨论】：