使用jQuery根据td内的复选框状态更改td的值可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<td>
<input type="checkbox" class="checkbox">
<span class="value">原始值</span>
</td>
$('.checkbox').change(function() {
// 在这里编写代码来更改td的值
});
$('.checkbox').change(function() {
var checkbox = $(this);
var td = checkbox.parent();
var span = td.find('.value');
if (checkbox.is(':checked')) {
span.text('选中状态的值');
} else {
span.text('未选中状态的值');
}
});
完整的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery根据td内的复选框状态更改td的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" class="checkbox">
<span class="value">原始值</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkbox">
<span class="value">原始值</span>
</td>
</tr>
</table>
<script>
$('.checkbox').change(function() {
var checkbox = $(this);
var td = checkbox.parent();
var span = td.find('.value');
if (checkbox.is(':checked')) {
span.text('选中状态的值');
} else {
span.text('未选中状态的值');
}
});
</script>
</body>
</html>
这样,当复选框的状态发生改变时,相应的td元素的值也会随之改变。
领取专属 10元无门槛券
手把手带您无忧上云