表格复选框勾选后的的行的input值进行实时监听对比
时间: 2024-03-01 10:53:06 浏览: 79
js监听input输入框值的实时变化实例
如果你使用的是 jQuery,可以通过以下代码实现实时监听表格中复选框勾选状态的变化:
HTML 代码:
```html
<table>
<thead>
<tr>
<th>选择</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="1"></td>
<td>商品1</td>
<td>100</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>商品2</td>
<td>200</td>
</tr>
<tr>
<td><input type="checkbox" value="3"></td>
<td>商品3</td>
<td>300</td>
</tr>
</tbody>
</table>
```
JavaScript 代码:
```javascript
$('table').on('change', 'input[type="checkbox"]', function() {
var selectedValues = [];
$('input[type="checkbox"]:checked').each(function() {
selectedValues.push($(this).val());
});
console.log('选中的值:' + selectedValues.join(', '));
// 在此处进行选中值与其它值的比较
});
```
上述代码中,我们使用了 jQuery 的 `on()` 方法来监听表格中的复选框的变化。当复选框的状态发生变化时,我们遍历所有选中的复选框,将其值存入 `selectedValues` 数组中。然后,我们就可以在此处进行选中值与其它值的比较了。在这里,我只是将选中的值输出到了控制台中。你可以根据具体需求来修改代码。
阅读全文