在DataTable表格中实现复选框选中后动态填充相邻列输入框的功能，核心是通过监听复选框的状态变化，找到同一行内的目标输入框，再将预设数据或关联数据写入输入框。下面我们一步步实现这个功能。
实现思路梳理
整个功能的实现可以分为三个核心步骤：
- 初始化DataTable表格，在表格中定义复选框列和需要填充的输入框列
- 给复选框绑定点击事件，监听选中状态变化
- 在点击事件中定位到当前行，获取相邻列的输入框元素，将对应数据填充进去
初始化DataTable表格
首先需要引入DataTable的相关依赖，然后定义表格结构，其中要包含复选框列和输入框列。下面是完整的初始化代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DataTable复选框填充输入框示例</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="exampleTable" class="display">
<thead>
<tr>
<th>选择</th>
<th>商品名称</th>
<th>商品单价</th>
<th>采购数量</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="row-check"></td>
<td>笔记本</td>
<td>4999</td>
<td><input type="number" class="quantity-input" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="row-check"></td>
<td>鼠标</td>
<td>199</td>
<td><input type="number" class="quantity-input" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="row-check"></td>
<td>键盘</td>
<td>399</td>
<td><input type="number" class="quantity-input" value="0"></td>
</tr>
</tbody>
</table>
</body>
</html>
上面的表格结构中，第四列就是相邻列的输入框，我们需要实现选中第一列的复选框后，自动给第四列的输入框填充默认值1。初始化DataTable的代码如下：
$(document).ready(function() {
// 初始化DataTable
var table = $('#exampleTable').DataTable({
"paging": false,
"searching": false,
"info": false
});
});
绑定复选框点击事件
DataTable会对表格进行动态渲染，所以直接给复选框绑定点击事件可能会失效，推荐使用事件委托的方式绑定。我们可以在document上监听复选框的点击事件，确保动态生成的元素也能触发事件。
事件处理逻辑如下：
- 判断复选框是否被选中
- 如果选中，获取当前复选框所在行的数据，找到相邻的输入框元素
- 将预设的填充值写入输入框
- 如果取消选中，清空输入框的值
完整的事件绑定代码如下：
$(document).ready(function() {
var table = $('#exampleTable').DataTable({
"paging": false,
"searching": false,
"info": false
});
// 事件委托绑定复选框点击事件
$(document).on('change', '.row-check', function() {
// 获取当前复选框的选中状态
var isChecked = $(this).prop('checked');
// 获取当前复选框所在的行
var $row = $(this).closest('tr');
// 找到同一行内的数量输入框
var $quantityInput = $row.find('.quantity-input');
if (isChecked) {
// 选中时填充默认值1，也可以根据需求获取其他数据填充
$quantityInput.val(1);
} else {
// 取消选中时清空输入框
$quantityInput.val(0);
}
});
});
进阶：根据行数据动态填充不同内容
上面的示例是填充固定值，实际开发中可能需要根据行的其他列数据填充不同的内容。比如根据商品单价的不同，填充不同的默认采购数量。我们可以修改事件处理逻辑，先获取行的商品单价数据，再决定填充的值。
修改后的事件处理代码如下：
$(document).on('change', '.row-check', function() {
var isChecked = $(this).prop('checked');
var $row = $(this).closest('tr');
var $quantityInput = $row.find('.quantity-input');
if (isChecked) {
// 获取当前行的商品单价，第三列是单价列，索引为2
var price = parseInt($row.find('td').eq(2).text());
var defaultQuantity = 1;
// 单价大于1000的商品默认采购2件
if (price > 1000) {
defaultQuantity = 2;
}
$quantityInput.val(defaultQuantity);
} else {
$quantityInput.val(0);
}
});
注意事项
在实现这个功能时，有几个需要注意的点：
- 如果使用DataTable的分页、排序、搜索功能，事件委托的方式依然有效，因为closest方法会找到当前复选框所在的真实行元素
- 如果输入框是动态渲染的，要确保输入框的class或者id选择器能够正确匹配到元素
- 填充数据时要注意数据类型的转换，比如从表格中获取的文本要转换成数字类型再处理
- 如果需要支持全选复选框，还需要额外处理全选逻辑，给所有行的复选框触发change事件即可