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

Posted 2023-03-06

【中文标题】根据表格数据隐藏和显示单选按钮

【英文标题】：Hide and show radio buttons based on table data

【发布时间】：2021-09-02 05:33:33

【问题描述】：

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

我的单选按钮：

                    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="[e-mail]" 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);
    

    
        );
        

【问题讨论】：

到目前为止你有什么尝试？？

我尝试将选定的值添加到表中，并且工作正常，但是如果单选按钮已被选中，如何隐藏它？

【参考方案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>

【讨论】：

非常感谢您的帮助。这正是我想要的。