如何在innerHTML 中搜索复选框？

Posted 2023-05-07

【中文标题】如何在innerHTML 中搜索复选框？

【英文标题】：how to search for a checkbox inside innerHTML?

【发布时间】：2020-11-28 06:32:33

【问题描述】：

我想对表格中的选定列求和。就我而言，第 2 列和第 3 列。我设法得到了总和，但我真的想添加一行的值，以防选中第 1 列中的复选框。

我可以得到一个单元格的innerhtml值但是我不知道如何搜索或找出里面的复选框是否被选中。

console.log(cell.innerHTML);

例如返回

"Extend (2x)<input type=\"checkbox\" id=\"Extend2x\" name=\"Extend2x\" class=\"beru\" <=\"\" td=\"\">

所以我可以看到复选框在那里，但那是我结束的地方

我试过了

console.log(cell.innerHTML.getElementsByTagName("checkbox"));
console.log(cell.innerHTML.html());
console.log(cell.html());
console.log($(cell).find(':checkbox').checked) returns undefined

但没有任何效果。

somoone 可以帮我找出答案吗？工作小提琴是here 您只需单击复选框即可完成列的总和。

【问题讨论】：

innerHTML 是文本。除了普通的String 方法之外，没有任何脱离文本的方法。

cell.getElementsByTagName('input') 将是尝试的方法。

或 $(cell).find(':checkbox') 用于 jQuery 方法。

这里要强调的重要一点是 innerHTML 是原生 Element 属性，而不是 jQuery 属性。而.html() 是一个 jQuery 方法，而不是原生 Element 方法。所以你把你所有的东西都倒过来了，什么不是

因为您再次将 jQuery 对象与原生元素混淆了。 jQuery 不直接公开原生 Element 属性。您必须使用[0].checked（使用本机元素）或.prop('checked')（使用jQuery方法）

【参考方案1】：

你要找的代码是这个

$(':checked')

您可以添加诸如 input:checked 之类的内容，或使其更具体。

编辑—— 刚看到 cmets - Taplar 已经回答了这个问题。那么这可以被认为是替代答案，并且不需要使用单元格/遍历表格的单元格。

【讨论】：

所以我可以使用$(':checked') 而不是$(cell).find(':checkbox').prop('checked'); ?

【参考方案2】：

我想这就是你想要的。这是对 dom (html) 中元素的每个引用都使用 jQuery。

$(".beru").on('change', function() 
  updateTotals();
);

function updateTotals() 
  
  // loop cells with class 'celkem'
  $('.celkem').each(function()
    
    // for each celkem, get the column
    const column = $(this).index();
    let total = 0;
    
    // loop trough all table rows, except the header and the row of totals
    $(this).closest('table').find('tr:not(:first, :last)').each(function()
      if($(this).find('input').is(':checked')) 
      
        // if the input is checked, add the numeric part to the total
        const str = $(this).find(`td:eq($column)`).text().replace(/\D/g, "");
        if(str) 
          total += Number(str);
        
      
    );
    
    if(!total) 
      // if the total is zero, clear the cell
      $(this).text("");
     else 
      // otherwise, print the total for this column in the cell
      $(this).text(total + " EUR");
    
  );

td 
  width: 25%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Zinzino" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<th><strong>Název</strong></th>
<th class="sum"><strong>První balíček</strong></th>
<th class="sum"><strong>Měsíčně</strong></th>
<th> </th>
</tr>
<tr>
<td>BalanceOil <input type="checkbox" id="BalanceOil" name="BalanceOil" class="beru"></td>
<td>149 EUR</td>
<td>30 EUR</td>
<td> </td>
</tr>
<tr>
<td>Extend (2x)<input type="checkbox" id="Extend2x" name="Extend2x" class="beru"</td>
<td>44 EUR</td>
<td>22 EUR</td>
<td> </td>
</tr>
<tr>
<td>Zinobiotic (3x)<input type="checkbox" id="Zinobiotic" name="Zinobiotic" class="beru"</td>
<td>64 EUR</td>
<td>23 EUR</td>
<td> </td>
</tr>
<tr>
<td><strong>Celkem</strong></td>
<td class="celkem"> </td>
<td class="celkem"> </td>
<td> </td>
</tr>
</tbody>
</table>

【讨论】：

我在@Taplar 的帮助下让它工作了。但是您的方法可能会更容易一些。我去看看。谢谢

如果您已经在使用 jQuery，我建议您进行此更改。往前走会容易很多。我还在表格中做了一些小改动，将 td 切换为 th 类的“标题”（做表格标题的正确本地方式），我移动了一些 css

你说得对，我更喜欢你的解决方案。代码不错，更优雅。我并没有完全理解你代码的每一行，我需要更多地阅读它。为什么使用 .closest？你的回答超出了我原来的问题。我创建了一个新的，所以当有人搜索“总和列”时，他们会得到很好的答案。你能在这里发表你的答案吗？ ***.com/questions/63313608/…

太好了，谢谢！我已经留下了相同的响应。closest() 是一个 jquery 方法，它找到最近的父级，在这种情况下是最近的表元素 api.jquery.com/closest

【参考方案3】：

如果您已经拥有对 DOM 元素的引用，那么只需使用选择器选择所有复选框。

var cbList = cell.querySelectorAll("[type='checkbox']");

for(var i = 0; i < cbList.length; i++)

    //do something with each checkbox
    //cbList[i];

记住节点列表不是数组，所以你不能使用 forEach ;)

【讨论】：

是的，NodeList 不是一个数组，但是你可以这样做let cbList = Array.from(cell.querySelectorAll("[type='checkbox']"))caniuse.com/#search=array.from