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>

此最新版本在表布局方面更加宽容：它查找“ col-store_number”类的所有单元格，其文本内容与899不同，并设置/取消所有复选框的刻度线在同一表格行中找到。

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

或者，如果您确实想使用Integer来检查值，则可以使用parseInt(items[i].value) === 899。

希望您对此有所期待！：）

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

2 个答案: