如何为数据表中的每一行创建一组单选按钮？

Question

我正在动态填充数据表中的信息。 我在每一行添加了两个单选按钮，用于选择是和否。 我无法一次在每一行上选择一个单选按钮，整个表格中只勾选了一个按钮。

我正在使用单选按钮作为勾选是或否我正在逐行收集信息并在最后保存。

 let cTraining = {}; cTraining.bindDataTable = function(trainingDataModelDisplay) { $('#traineeProgramsHistoryReassign').dataTable().fnDestroy(); var customError = ""; if (typeof(trainingDataModelDisplay) == "string") { customError = trainingDataModelDisplay; trainingDataModelDisplay = []; } var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; //, hour: 'numeric', minute: 'numeric', second: 'numeric' var programUserTable = $('#traineeProgramsHistoryReassign').dataTable({ "pageLength": 25, scrollX: true, "ordering": false, //"searching": false, "order": [], //Initial no order. language: { paginate: { next: '<i class="fa fa-arrow-right"></i>', // or '→' previous: '<i class="fa fa-arrow-left"></i>', // or '←' }, "emptyTable": "No data available may be because there are no program(s) assigned!!" }, columns: [ { data: 'FLSP_NAME', name: 'FLSP_NAME', title: 'Trainee Name', width: 50 }, { data: 'PROGRAM_NAME', name: 'PROGRAM_NAME', title: 'Program Name', width: 50 }, { data: 'REASSIGN_YES', title: 'Reassign Yes', width: 40, render: function(data, type, full, meta) { if (data == true) { return '<input id="chk1" name="radio1" type = \\"radio\\" checked value="' + data + '">'; } else { return '<input id="chk1" name="radio1" type = \\"radio\\" value="' + data + '">'; } } }, { data: 'REASSIGN_NO', title: 'Reassign No', width: 40, render: function(data, type, full, meta) { if (data == true) { return '<input id="chk2" name="radio1" type = \\"radio\\" checked value="' + data + '">'; } else { return '<input id="chk2" name="radio1" type = \\"radio\\" value="' + data + '">'; } } }, ], rowsGroup: ['FLSP_NAME:name', 'PROGRAM_NAME:name'], data: trainingDataModelDisplay }); $('#traineeProgramsHistoryReassign tbody').on('change', '#chk1', function() { // If checkbox is not checked var data = programUserTable.api().row($(this).parents('tr')).data(); data.REASSIGN_YES = this.checked }); $('#traineeProgramsHistoryReassign tbody').on('change', '#chk2', function() { // If checkbox is not checked var ReassignNoProgUser = {}; var data = programUserTable.api().row($(this).parents('tr')).data(); data.REASSIGN_NO = this.checked }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

我想为每一行分组单选按钮，以便我每次可以选择一个单选按钮。

Answer 1

我有同样的查询。 这就是我使用@mplungjan 的建议解决它的方法。 希望这能帮助其他处于同样困境的人。

<table class="table table-striped datatable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th rowspan="2">Threat</th>
            <th colspan="2">Risk Scale</th>
        </tr>
        <tr>
            <th>Low</th>
            <th>Medium</th>
            <th>High</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var risk in Model)
        {
            <tr>
                <td>@ed.Threat.Name</td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="1"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="2"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="3"></td>
            </tr>
        }
    </tbody>
</table>