添加/删除复选框行（Javascript/Jquery）

我试图在选中该行的第2个单元格时添加和删除它们的文本

假设他们在表中有4列，并且希望在页面的不同部分显示/隐藏某些行

我的目标是根据复选框值（0 | 1）添加/显示和删除/隐藏选定的行值。对于每一行值，它应该有一个按钮/链接（X）来删除该值，并取消选中表中的复选框

<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>

<table id="" class="table table-bordered table-responsive table-striped">
    <tr class="" style="background-color: #237ec2; color: white;">
      <td class="text-center"><span>A</span></td>
      <td class="text-center"><span>B</span></td>
      <td class="text-center"><span>C</span></td>
      <td class="text-center"><span>D</span></td>

    </tr>

    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A1</span></td>
      <td>
        <h5>B1</td>
      <td>
        <h5>C1</h5></td>
      <td>
        <h5>D1</h5></td>

    </tr>
    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A2</span></td>
      <td>
        <h5><span class="second_col">B2</span></h5></td>
      <td>
        <h5>C2</h5></td>
      <td>
        <h5>D2</h5></td>

    </tr>
    <tr style="">
      <td>
        <input type="checkbox" class="usercheck">
        <span>A3</span></td>
      <td>
        <h5><span class="second_col">B3</span></h5></td>
      <td>
        <h5>C3</h5></td>
      <td>
        <h5>D3</h5></td>

    </tr>

  </table>

选择器/移除
清楚的
A.
B
C
D
A1
地下一层
C1
D1
A2
地下二层
C2
D2
A3
地下三层
C3
D3

我尝试的JavaScript如下所示：

   $(document).ready(function() {

            $('.usercheck').change(function() {
                $('.selected_values').empty();
                $(".usercheck:checked").each(function(index) {
                    var chain = "";
                        chain = $(this).html(".usercheck").val();
                        $('.selected_values').append(chain  + '&nbsp;' +  '<a href="#"><span id="removeVal"  style="color:red;">X</span></a>');
                       });
            });

        });
        function clearSelection(){
            $('.selected_values').empty();
            $('.usercheck').attr('checked','false');
        }

$（文档）.ready（函数（）{
$（'.usercheck'）.change（函数（）{
$（'.selected_values'）.empty（）；
$（“.usercheck:checked”）.each（函数（索引）{
var-chain=“”；
chain=$（this.html（“.usercheck”）.val（）；
$（'.selected_values'）。追加（chain+''+''）；
});
});
});
函数{
$（'.selected_values'）.empty（）；
$（'.usercheck'）.attr（'checked'，'false'）；
}

下面是我尝试使用的js小提琴的链接。 我能够显示内容，但只给一列赋值，我想这不是正确的方式

您可以执行以下操作：

对于未选中复选框，必须执行以下操作：

.prop('checked', false); 

---

不用重新编写整个HTML，我就是这样做的

我所做的是为创建的每个跨度添加一个ID。该ID稍后用于迭代所有复选框，并找到需要取消选中的复选框，然后取消选中

$（文档）.ready（函数（）{
$（'.usercheck'）.change（函数（）{
$（'.selected_values'）.empty（）；
$（“.usercheck:checked”）.each（函数（索引）{
var-chain=“”；
chain=$（this.html（“.usercheck”）.val（）；
$（'.selected_values'）。追加（chain+''+''）；
});
$（“.removeVal”）。单击（选中移除）；
});
});
功能检查删除（e）{
var removeId=e.target.id；
$（“.usercheck”）。每个（函数（索引，复选框）{
如果（checkbox.value==removeId）{
checkbox.checked=false；
}
});
e、 target.parentNode.previousSibling.remove（）；
e、 target.remove（）；
}
函数{
$（'.selected_values'）.empty（）；
$（'.usercheck'）.prop（'checked'，false）；
}

选择器/拆卸


选定用户
清楚的
A.
B
C
D
A1
地下二层
C1
D1
A2
地下二层
C2
D2
A3
地下三层
C3
D3

作为一个好奇的问题，您想用纯Javascript来实现吗？我觉得这很有趣，因为你使用jquerytank你提到我只想用javascript/jquery来实现它。谢谢你。但我需要通过按“X”删除添加元素的帮助。它在IE中使用$（e.target.parentNode.previousSibling.remove（）$（e.target）。删除（）；由于删除在IEYeah中不支持，所以总是有办法解决不兼容问题，尤其是jquery。请记下我的答案。