我在 Html 中使用带有分页的 Jquery 数据表。单选按钮在单页中工作正常，但当它出现在多页时无法阻止单选按钮的多次选择，即如果我在第 1 页选择一个单选按钮，在第 2 页选择另一个单选按钮，则两者都被选中仅在选定模式下。 单选按钮以单选而闻名，但在这里我得到了不同的行为
最佳答案
我遇到了和你一样的问题。我找到了解决这个问题的方法。请在下面的完整示例中找到代码详细信息。
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<style>
table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
background-color: #A2D3F6;
}
</style>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Location </th>
<th>Base Location </th>
</tr>
</thead>
<tbody>
<tr><td>Pune</td><td><input type="radio" name="baseLocation" value="Pune"/></td></tr>
<tr><td>Mumbai</td><td><input type="radio" name="baseLocation" value="Mumbai"/></td></tr>
<tr><td>Dubai</td><td><input type="radio" name="baseLocation" value="Dubai"/></td></tr>
<tr><td>Nashik</td><td><input type="radio" name="baseLocation" value="Nashik"/></td></tr>
<tr><td>Delhi</td><td><input type="radio" name="baseLocation" value="Delhi"/></td></tr>
<tr><td>Sangli</td><td><input type="radio" name="baseLocation" value="Sangli"/></td></tr>
<tr><td>Chennai</td><td><input type="radio" name="baseLocation" value="Chennai"/></td></tr>
<tr><td>Panji</td><td><input type="radio" name="baseLocation" value="Panji"/></td></tr>
<tr><td>Thane</td><td><input type="radio" name="baseLocation"value="Thane" /></td></tr>
<tr><td>Patna</td><td><input type="radio" name="baseLocation"value="Patna" /></td></tr>
<tr><td>Bhopal</td><td><input type="radio" name="baseLocation " value="Bhopal"/></td></tr>
<tr><td>ABC</td><td><input type="radio" name="baseLocation" value="ABC"/></td></tr>
<tr><td>XYX</td><td><input type="radio" name="baseLocation" value="XYX"/></td></tr>
<tr><td>PQR</td><td><input type="radio" name="baseLocation"/ value="PQR"></td></tr>
<tr><td>Riaydh</td><td><input type="radio" name="baseLocation" value="Riaydh"/></td></tr>
<tr><td>Jeddah</td><td><input type="radio" name="baseLocation" value="Jeddah"/></td></tr>
</tbody>
</table>
</body>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var lastSelectedRadio = '';
var table='';
$(document).ready(function() {
table= $('#example').DataTable( {
responsive: true,
pageLength: 5,
lengthChange: true,
bSort: false,
"sPaginationType": "full_numbers",
lengthMenu: [5, 10, 15],
"fnDrawCallback": function( oSettings ) {
lastSelectedRadio=currentSelectedRadio();
},
} );
} );
$("#example input[type='radio']").on("click",function(){
table.$("input[type='radio'][value='" + lastSelectedRadio +"']").prop('checked', false);
lastSelectedRadio = ($(this).val() ? $(this).val() :lastSelectedRadio)
table.$("input[type='radio'][value='" + lastSelectedRadio + "']").prop('checked', true);
});
function currentSelectedRadio()
{
var currentSelectedValue=lastSelectedRadio;
$("#example input[type=radio]:checked").each(function() {
currentSelectedValue=($(this).val() ? $(this).val() :currentSelectedValue);
});
return currentSelectedValue;
}
</script>
</html>
解释: 在上面的代码中，您可以看到，我编写了一个自定义函数 currentSelectedRadio() 并从 fnDrawCallback 调用它，因为每次更改页面时都会调用 fnDrawCallback 函数。同时，我们将先前选择的按钮值备份到全局变量“lastSelectedRadio”中。在单选按钮的单击事件中。我正在从全局变量 lastSelectedRadio 中取消选中先前选择的按钮的值，并将选中的属性添加到当前单选按钮。
但请记住，数据表另一页上的元素在 DOM 中不可用。 Datatable 仅将当前页面元素添加到 DOM。那么我们如何才能获得所有在datatable中可用但在DOM中不可用的元素呢？是的，我们可以获得所有元素，为此我们必须使用 table.$("") 语法遍历数据表，然后只能取消选中在选择当前按钮之前选择的另一个页面上的单选按钮
关于jquery - 防止在分页的 jquery 数据表中选择多个单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21778443/