如何在选中复选框时更改表行中输入文本的背景颜色
要在选中复选框时更改表行中输入文本的背景颜色，你可以使用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类的应用。
应用场景
这个功能可以应用于需要根据用户选择动态改变界面显示的场景，例如：
- 表单验证：当用户选中某个复选框时，相关的输入框背景颜色变为黄色，提示用户需要填写该字段。
- 数据筛选：在数据表格中，选中复选框可以高亮显示相关行，便于用户识别和处理。
参考链接
通过这种方式，你可以轻松实现选中复选框时更改表行中输入文本的背景颜色。
相关·内容
2回答
我有一个绑定了一些数据的网格视图。我对交替的行也有不同的背景，所以表格更具可读性……如何在选中第一列中的复选框时更改行背景的颜色，并在取消选中时将其更改回原始颜色。我遇到的问题是，如何知道原始背景(取消选中</em
浏览 0提问于2012-01-31得票数 0
回答已采纳
3回答
我想在选中CheckBox时更改文本的颜色。android:gravity="center_horizontal|center_vertical" android:text="test/>
选中复选框时，复选框背景通常会更改。问题出在文本
浏览 3提问于2014-12-31得票数 13
回答已采纳
如何在编辑模式下删除表格视图单元格突出显示的颜色。我在编辑模式中使用表视图属性“allowsMultipleSelection”。默认情况下，单元格以浅蓝色突出显示。尽管我们可以更改突出显示的颜色，但我还没有看到任何删除突出显示的颜色属性的选项。我只想要表格视图单元格复选框选择，而不是突出显示模式。"cell.SelectedBackgroundView“允许在单元格被选中<
浏览 4提问于2018-03-28得票数 7
1回答
我已经用4列填充了一个表。第一列是用循环填充的复选框。实际上，所有列都是用循环填充的。第二列是文本输入条目x，其中x是列，y是行。所以这就是我想要做的。当您选中第1行(checkboxy)中的复选框时，我想要更改第2列第1行(entryx)中输入框的
浏览 0提问于2012-05-28得票数 0
我有一个表，其中每一行都有一些数据，用户可以提交所有行或单行或一些行。因此，现在每一行都有一个复选框，如果用户选中该复选框，该行的背景颜色应该会改变(我已经使用jquery实现了这一点)。现在有了另一个复选框来选择所有这些复选框，我也用jquery实现了这一点。现在的问题是，当我选中( selectAll )复选框</e
浏览 0提问于2011-12-08得票数 1
回答已采纳
我使用带有定制NSTextField子类实例的基于视图的NSTableView来绘制行标签。文本字段甚至不知道它是表视图<em
浏览 3提问于2012-01-18得票数 1
如果用户取消选中复选框并更改文本框的背景颜色，我希望禁用文本框。如果用户选中复选框，则该文本框应可编辑并更改为白色。(".ba").click(function () { });
浏览 1提问于2013-05-25得票数 4
回答已采纳
3回答
我想让它像这样发挥作用：
当前将检查LIs中的所有复选框。当未选中li内的复选框时，li将具有特定的背景色(对于所有LIs来说，此背景色将是相同的)。在再次选中复选框后，LI将显示原来的背景色。当我取消选中复选框时，它工作得很好，将背景颜色
浏览 0提问于2013-08-14得票数 3
回答已采纳
我想要更改输入文本/文本区域的背景颜色，包含在表格行的td中，数据来自数据库，每行都包含复选框，因此当单击复选框时，输入文本的背景颜色将更改。
浏览 67提问于2019-10-07得票数 0
回答已采纳
我使用下面的代码自动生成一个新的复选框，并将一个单元格链接到它：我想创建另一个sub，当复选框处于选中状态(蓝色)或未选中状态(红色)时，它会更改复选框中.LinkedCell单元格的背景颜色。我在工作表中会有大约200个复选框</em
浏览 15提问于2016-09-19得票数 0
回答已采纳
3回答
我被创建了一个自定义复选框，使用的是顺风(作为react项目中的一个组件)。现在，我想更改复选框的背景色，然后再选中它。这就是我想要的：
这是当前的样子：
我想知道如何在tailwind.css中更改这个颜色这是复选框代码：<div className="check-box">
浏览 2提问于2021-09-30得票数 0
我有一个带有复选框列的可选telerik网格。选中复选框后，我使用javascript将行的背景颜色更改为黄色。
当使用javascript取消选中复选框时，我想恢复网格的原始css。我可以切换行背景色，但是因为网格是可选的，所以css的行为与默认网格不同。这是具有交替的行<
浏览 1提问于2010-11-13得票数 1
回答已采纳
2回答
提前道歉，因为我知道这是一个愚蠢的问题。我正在使用下面的CSS代码来更改标签的背景颜色，但它的关联复选框已选中：我还想在选中id="button1"时更改整个页面的背景色。我尝试添加行和新行</e
浏览 1提问于2015-04-06得票数 0
这些行中的一些应该会反映错误，并且它们的文本颜色会更改：
反映没有错误的行以默认颜色显示(在我的计算机上，白色背景上的黑色文本)。反映存在错误的行以红色文本颜色显示(在我的计算机上，这是白色背景上的红色文本</em
浏览 5提问于2008-11-13得票数 6
回答已采纳
3回答
复选框、无线电按钮、滑块等颜色为colorAccent
<item name="android:buttonStyle">@style/Button.De
浏览 9提问于2016-04-22得票数 0
回答已采纳
如何在选中复选框时更改我的行跨度tr元素背景？tr元素具有rowspan属性。 $(this).parents('tr').css('background', '#fff'); } });
我不认为html代码是必要<e
浏览 0提问于2021-10-14得票数 2
我有一个ListView，我想在不使用CheckedTextView的情况下在ListView中选择多个项目。
请帮帮我!！
浏览 0提问于2010-04-23得票数 2
回答已采纳
4回答
我在一个有23列和7行的表中有复选框。我想以这样一种方式设置复选框的样式:选中时隐藏复选标记。要识别选中的项，我需要更改复选框的背景图像，比如用颜色填充它。有人能告诉我如何在Jquery/Javascript和CSS中做到这一点吗？我试着使用的Javascript插
浏览 3提问于2012-08-10得票数 1
在JetBrains‘IDE中更改背景色的设置是什么？
我正在运行12.1.6版本的终极版本。不同版本的软件是否有很大的不同？
浏览 14提问于2013-10-16得票数 81
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
