根据表格数据隐藏和显示单选按钮

Question

我有一个单选按钮和表格列表。如果选中了一个单选按钮，我想将它的值添加到表中并将其从单选按钮列表中隐藏。此外，如果从表中删除该值，我想在单选按钮列表中显示它。请对如何做到这一点有任何想法。

我的单选按钮：

                    foreach (var item in Model.ServicesList)
                    {
                        <div class="col-md-4">
                            <div class="funkyradio-default">
                                @Html.RadioButtonFor(model => model.SelectedServiceID, @item.ServiceID, new { @class = "form-control ", @id = @item.ServiceID, @required = "required", title = "يرجى أختيار الخدمة" })
                                <label name="ServiceName" id="ServiceName_@item.ServiceID" for="@item.ServiceID"> @item.ServiceName</label>

                                @Html.ValidationMessageFor(model => model.SelectedServiceID, "", new { @class = "validation-label" })
                            </div>
                        </div>
                    }

我的桌子：

<div class="row ">
                <div class="col-6">
                    <table class="table main-table" id="ServicesTable">
                    </table>
                </div>
               
            </div>

MY Jquery 函数将选定的值添加到表中。它工作正常，但如果单选按钮已被选中并且它的值已添加到表中，我不知道如何隐藏它。

         function AddNewService() {
                var SelectedServiceID = $('[name="SelectedServiceID"]:checked').val();
    
                    $.ajax({
                        type: "Post",
                        url: '/IndividualLicense/CheckServiceRequirment',
                        data: { "SelectedServiceID": $('[name="SelectedServiceID"]:checked').val(), "MainServiceID": $('#MainServiceID').val() },
                        success: function (data) {
        
                            if (data.Result == true) {
        
        
                                var table = document.getElementById("ServicesTable");
        
                                var Services = [];
        
                                Services.push({
                                    'SelectedServiceID': SelectedServiceID,
                                    'MainServiceID': $("#MainServiceID").val(),
                                    'ServiceName': $("#ServiceName_" + SelectedServiceID).text(),
        
                                });
        
                                for (i = 0; i < Services.length; i++) {
                                    var content = "<tr style='border-bottom: 1px solid #dee2e6;'>"
                                    for (i = 0; i < Services.length; i++) {
                                        content += '<td>' + Services[i].ServiceName + '</td>';
                                        content += "<td><div><button id='" + Services[i].SelectedServiceID + "' class='btn btn-view delete' name='delete' type='button'>حذف</button></div></td>";
                                        content += '<td  style="display:none">' + Services[i].SelectedServiceID + '</td>';
                                        content += '<td  style="display:none">' + Services[i].MainServiceID + '</td>';
        
        
                                    }
                                    content += "</tr>"
        
                                    $('#ServicesTable').append(content);
    }
}
    
        });
        }

Answer 1

最简单的方法是使用data属性..看下一个例子

$(document).ready(() => {
  // checkbox change event when input checked/unchecked
  $(document).on('change', 'input:checkbox' , (e) => {
    if(e.target.checked){  // if checked
      const serviceID = $(e.target).val();  //get its value
      $(e.target).closest('li').remove();   // remove the closest li
      $('table').append(rowHTML(serviceID)); // append to the table with id value
    }
  });
  
  // delete the row
  $(document).on('click' , ".btn.delete" , (e) => {
    const get_row = $(e.target).closest('tr');  // get closest row/tr
    const get_row_id = get_row.attr('data-serviceID-row'); // get the data-serviceID-row from <tr data-serviceID-row="5">
    get_row.remove(); // remove the row
    $('ul').append(inputHTML(get_row_id)); // append the li with input to the ul
  });
});

// The HTML 
function rowHTML(serviceID){
  return '<tr data-serviceID-row="'+ serviceID +'"><td>Service ID '+ serviceID +'</td><td><span class="btn delete">Delete</span></td></tr>';
}
function inputHTML(serviceID){
  return '<li><input type="checkbox" value="'+ serviceID +'" />Service ID '+ serviceID +'</li>';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr data-serviceID-row="5">
    <td>Service ID 5</td>
    <td><span class="btn delete">Delete</span></td>
  </tr>
</table>

<h3>CheckBoxes</h3>
<ul>
  <li><input type="checkbox" value="1"/>Service ID 1</li>
  <li><input type="checkbox" value="2"/>Service ID 2</li>
  <li><input type="checkbox" value="3"/>Service ID 3</li>
  <li><input type="checkbox" value="4"/>Service ID 4</li>
</ul>