使用 jquery 设置复选框时遇到问题答案

【问题标题】：Having trouble setting a checkbox using jquery使用 jquery 设置复选框时遇到问题
【发布时间】：2020-11-05 13:52:51
【问题描述】：

我有一个动态生成行的表。大体结构如下：

<table id="table1">
 <thead></thead>
 <tbody>
   <tr>
    <td>Cell value 1</td>
    <td>Cell value 2</td>
    <td>Cell value 3</td>
    <td>
     <input type="checkbox" id="checkbox1" value="value1>
     <input type="checkbox" id="checkbox2" value="value2>
    </td>
   </tr>
   <tr>
    <td>Cell value 4</td>
    <td>Cell value 5</td>
    <td>Cell value 6</td>
    <td>
     <input type="checkbox" id="checkbox1" value="value1>
     <input type="checkbox" id="checkbox2" value="value2>
    </td>
   </tr>
 </tbody>
</table>

基于其中一个（准确地说是第三个）中的值，我正在尝试选中/取消选中复选框。我的脚本是：

$('#table1 tbody tr').each(function(){
 var cellValue = $(this).find("td").text();
 if (cellValue=='someValue'){
  $('#checkbox1).prop('checked',true);
 }
});

我面临的问题是，由于行是动态生成的，因此在该迭代期间，我无法获得那组特定的复选框。与上面的示例一样，在第一次迭代期间，我设置了 checkbox1 并且它正在工作，但在第二次迭代期间，我试图在第二行中设置 checkbox2，但在第一行中的 checkbox2 正在设置。任何帮助/指针将不胜感激。谢谢。

【问题讨论】：

ID 应该是唯一的，请考虑使用类，并使用复选框的相对位置来选择正确的复选框。
还请记住，$(this).find('td').text() 返回来自 tr (this) 的所有 td 子元素的文本，这些子元素组合成一个字符串。我怀疑这不是你想要的。
jQuery 对我来说有点新。我的印象是类在这里比 id 更有用。感谢您的帮助！

标签： javascript jquery user-interface dom frontend

【解决方案1】：

您可以使用.eq(2) 获得第三个td，然后定位正确的checkbox，您可以使用：

$('.checkbox1', this)... //OR
$(this).find('.checkbox1')....

根据您的条件语句是什么，可以使用数组.includes() 方法将它们组合成一个，如下面的演示所示：

$('#table1 tbody tr').each(function() {
    var cellValue = $(this).find("td").eq(2).text();
    console.log(cellValue);
    if ( ['Cell value 3','Cell value 6'].includes(cellValue) ){
        $('.checkbox1', this).prop('checked',true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
 <thead></thead>
 <tbody>
   <tr>
    <td>Cell value 1</td>
    <td>Cell value 2</td>
    <td>Cell value 3</td>
    <td>
     <input type="checkbox" class="checkbox1" value="value1">
     <input type="checkbox" class="checkbox2" value="value2">
    </td>
   </tr>
   <tr>
    <td>Cell value 4</td>
    <td>Cell value 5</td>
    <td>Cell value 6</td>
    <td>
     <input type="checkbox" class="checkbox1" value="value1">
     <input type="checkbox" class="checkbox2" value="value2">
    </td>
   </tr>
 </tbody>
</table>

【讨论】：

这行得通。谢谢你。使用 classes 与 ids 的想法是新的，但肯定是令人兴奋的。

【解决方案2】：

您不能生成具有相同 id 的元素。当函数首次执行时，它将选择具有该 id 的第一个元素。请改用 class=""。

如果您想存储每个检查的值，请检查：HTML Element Array, name="something[]" or name="something"?

【讨论】：