当用户单击提交按钮时，删除具有未选中复选框的整个表格行

Question

我的表格具有选中/取消选中复选框功能，并且表格具有一些输入字段，例如文本框、下拉菜单。用户应至少选择一个复选框来处理表中的数据。那工作正常。例如，表格有 3 行，用户选择任何一个复选框并单击提交按钮，然后应删除剩余的两行表格，而不是提交。我尝试了以下一个。

$("input:not(:checked)").each(function () {
      $('input:not(:checked)').closest('tr').remove();
});

但是这个正在删除整个表。所以我只需要删除那些未选中的表行。任何帮助将不胜感激。

Answer 1

假设您不使用<th></th>，您的标题行也会被选中，因为该复选框也未选中。可能这就是所有行都被删除的原因。控制台input:not:(:checked)它。它会给出清晰的想法。

编辑： 然后试试这个，也许这会奏效

$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
      $(this).remove();
}

Answer 2

对我来说似乎工作正常：https://jsfiddle.net/r9zgvbqu/7/

两个 cmets，您正在使用 .each() 函数对 "input:not:(:checked)" 选择的所有元素执行某些操作，但在该函数中再次选择所有内容。所以你只是多次做同样的事情。您可以跳过该步骤，也可以直接跳过建议的.each()-$(this) 组合：

$("input:not(:checked)").closest('tr').remove();

这会删除所有你想要的。

编辑：您的问题是您选择了所有未检查的输入，包括文本输入等。您可以指定您选择的输入类型：input[type=checkbox]:not(:checked)

一般来说，我会避免通过标签名称来选择元素。最好给相关的复选框一个类，可以按类选择。

这是你的小提琴的固定版本：https://jsfiddle.net/927sdh8n/

这是一个使用类的更简单、更安全的版本：https://jsfiddle.net/qz53wfxc/