如何在选中复选框时更改表行中输入文本的背景颜色
要在选中复选框时更改表行中输入文本的背景颜色，你可以使用JavaScript来实现这一功能。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Input Background Color</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" onchange="toggleHighlight(this)"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" onchange="toggleHighlight(this)"></td>
<td><input type="text"></td>
</tr>
</table>
<script>
function toggleHighlight(checkbox) {
const row = checkbox.parentNode.parentNode;
const inputs = row.querySelectorAll('input[type="text"]');
inputs.forEach(input => {
input.classList.toggle('highlight', checkbox.checked);
});
}
</script>
</body>
</html>解释
- HTML结构：
- 创建一个表格，每行包含一个复选框和一个文本输入框。
- 每个复选框都有一个
onchange事件监听器，当复选框状态改变时，调用toggleHighlight函数。
- CSS样式：
- 定义一个
.highlight类，用于设置背景颜色为黄色。
- 定义一个
- JavaScript逻辑：
toggleHighlight函数接收一个复选框元素作为参数。- 获取该复选框所在的行（
row）。 - 在该行中查找所有的文本输入框（
inputs）。 - 遍历这些输入框，根据复选框的状态（选中或未选中），切换
.highlight类的应用。
应用场景
这个功能可以应用于需要根据用户选择动态改变界面显示的场景，例如：
- 表单验证：当用户选中某个复选框时，相关的输入框背景颜色变为黄色，提示用户需要填写该字段。
- 数据筛选：在数据表格中，选中复选框可以高亮显示相关行，便于用户识别和处理。
参考链接
通过这种方式，你可以轻松实现选中复选框时更改表行中输入文本的背景颜色。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
