我在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中取消选中先前所选按钮的值，并将checked属性添加到当前单选按钮。
但请记住，另一个数据表页面上的元素在DOM中不可用。 Datatable仅将当前页面元素添加到DOM。那么我们如何才能获得数据表中可用但在DOM中不可用的所有元素？是的，我们可以获得所有元素，因为我们必须使用table迭代datatable。$（“”）语法然后只能取消选中在选择当前按钮之前选择的另一个页面上的单选按钮
我有同样的问题，我在这里找到了一个帖子：http://datatables.net/forums/discussion/20484/how-to-avoid-multiple-radio-buttons-selection-when-paginating-a-table
每次切换页面时都会调用“drawCallback”函数。因此，可以将当前在页面上检查的按钮的值与在另一页上检查的按钮的值进行比较。 （您需要保存选中按钮的最后一个值。）如果它们不匹配，则只需清除当前页面上按钮的check属性。
希望能帮助到你。