添加/删除复选框行(Javascript/Jquery)

Question

我正在尝试在选中该行的单元格 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>

我尝试的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');
        }

这是我尝试工作的js小提琴的链接。我能够显示内容，但通过只为一列赋予价值，我认为这不是正确的方法。

https://jsfiddle.net/rahilAhmed/y4fzj66o/

Answer 1

无需重写整个 HTML，这就是我让它工作的方式。

我所做的是向创建的每个范围添加一个 ID。该 ID 稍后用于遍历所有复选框，并找到需要取消选中的复选框，然后取消选中它。

                $(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='+ chain + ' class="removeVal" style="color:red;">X</span></a>'); 
                           });
                           $(".removeVal").click(checkRemove);
                });
            });
            
            function checkRemove(e) {
                var removeId = e.target.id;
                $(".usercheck").each(function(index,checkbox) {
                    if (checkbox.value == removeId) {
                        checkbox.checked = false;
                    }
                });
                e.target.parentNode.previousSibling.remove();
                e.target.remove();
            }
       
            function clearSelection(){
                $('.selected_values').empty();
                $('.usercheck').prop('checked',false);
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1 style="text-align:center">Selector/Removal</h1>
                </div>
            
            </div>
            <br>
            <div class="row">
                <div class="col-xs-3">
                    Selected Users
                    <div class="" >
                        <h4 class="selected_values"></h4>
                    </div>
                </div>
                    <div class="col-xs-1"><button   onclick="clearSelection();">Clear</button></div>
                <div class="col-xs-8">
                    <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 style="">
                            <td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
                            <td><h5><span class="second_col">B2</span></h5></td>
                            <td><h5>C1</h5></td>
                            <td><h5>D1</h5></td>
                            
                        </tr>
                        <tr style="">
                            <td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >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" value="A3[B3]">
                            <span class="first_col" value="a3" >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>
                </div>
                
            </div>
        </div>

Answer 2

你可以这样做： JsFiddle

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

.prop('checked', false);