jQuery DataTable实现单行复选框单选功能问题排查

我看了你的代码，问题主要出在事件绑定时机和选择器错误这两个地方，下面给你一步步修正：

问题分析 #

1. 事件绑定失效：你直接用$('input[name="name1"]').on('change', ...)绑定事件，但DataTable是通过AJAX异步加载数据的，初始化时页面上还没有这些动态生成的复选框，所以后续新增的行不会触发这个事件。
2. 选择器错误：你写的$(this).closest('tr').find('input[name=""]')完全找不到其他行的复选框——首先它只在当前行查找，其次找的是name=""的元素，而你的复选框name是name1，这根本匹配不到。

修正后的完整代码 #

HTML部分（无需修改，保持原样）

<div> 
  <h1>Accounts Table</h1> 
  <table id="employeesTable" class="display"> 
    <!-- Header Table --> 
    <thead> 
      <tr> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Amount</th> 
        <th>Date</th> 
        <th>Description</th> 
        <th>Active</th> 
      </tr> 
    </thead> 
    <!-- Footer Table --> 
    <tfoot> 
      <tr> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Amount</th> 
        <th>Date</th> 
        <th>Description</th> 
        <th>Active</th> 
      </tr> 
    </tfoot> 
  </table> 
</div>

JavaScript部分（修复核心逻辑）

$(document).ready(function () { 
  var table = $('#employeesTable').DataTable({ 
    "sAjaxSource": "/account/list", 
    "sAjaxDataProp": "", 
    "order": [[ 0, "asc" ]], 
    "aoColumns": [ 
      { "mData": "id"}, 
      { "mData": "account_type" }, 
      { "mData": "amount" }, 
      { "mData": "date" }, 
      { "mData": "description" }, 
      { "mData": null, className: "center", defaultContent:'<input type="checkbox" name="name1"/>' } 
    ] 
  });

  // 改用事件委托，确保动态生成的复选框也能触发事件
  $('#employeesTable').on('change', 'input[name="name1"]', function() {
    var isChecked = $(this).prop('checked');
    // 如果当前复选框被选中，取消所有其他同name的复选框
    if (isChecked) {
      $('input[name="name1"]').not(this).prop('checked', false);
    }
    // 可选：如果需要强制只能选中一个，取消当前选中时可以清空所有，这里保留默认逻辑
  });
});

关键修改说明 #

1. 事件委托：把事件绑定到已经存在的表格元素#employeesTable上，通过第二个参数指定触发事件的目标元素，这样不管后续动态生成多少行，复选框的change事件都能被捕获。
2. 正确的选择器：用$('input[name="name1"]').not(this)选中所有name为name1的复选框，排除当前点击的那个，然后统一设置为未选中，完美实现单选效果。
3. 简化逻辑：只在当前复选框被选中时才取消其他的，完全符合你要的“点击某行复选框时其他行自动取消”的需求。

内容的提问来源于stack exchange，提问作者Hotdot Cyber