根據表數據隱藏和顯示單選按鈕

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>

我的 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>