如何在选中复选框时更改表行中输入文本的背景颜色

要在选中复选框时更改表行中输入文本的背景颜色，你可以使用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类的应用。

应用场景

这个功能可以应用于需要根据用户选择动态改变界面显示的场景，例如：

表单验证：当用户选中某个复选框时，相关的输入框背景颜色变为黄色，提示用户需要填写该字段。
数据筛选：在数据表格中，选中复选框可以高亮显示相关行，便于用户识别和处理。

参考链接

通过这种方式，你可以轻松实现选中复选框时更改表行中输入文本的背景颜色。

相关·内容

AWT常用组件

JS的常用操作

用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。

软件测试|超好用超简单的Python GUI库——tkinter（十二）

上一篇文章我们介绍了tkinter单选框的实现，单选框的各选项之间的关系是互斥的，选择了A选项，就不能选B选项；复选框就不一样，各个选项之间是并列的，我选了A还可以选B和C选项，我们在大学选课以及我们在啊购物时选购商品就是类似的情况。

javaWeb核心技术第三篇之JavaScript第一篇

- 概述 - JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 "通过<script></script>标签实现,在标签体中编写js代码即可" - 方式2:外联式 "编写外部的js文件,通过srcipt标签的src属性引入即可" - 注意事项: " script标签可以放在页面的任何位置,一般

仅使用HTML和CSS的亮暗模式按钮切换

我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。

后台系统设计（上篇：选择）

在单个选项下，存在多组互斥选项，且互斥选项组之间存在一定关系，可以考虑混用分段控件和常规按钮，由于分段控件在视觉上占用更大的面积，故给人在层级上更加置前。

在Word中插入一个可以勾选和取消的方框

文章背景：在工作中，有时需要在表格内插入几个复选框，让用户去勾选，如下图所示。这种通过点击方框，自动打上对勾的效果如何实现呢？下面介绍一种方法。

HTML入门的简单学习

1：HTML简介 1.1：HTML(Haper Text Markup language):超文本标记语言超文本就是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素

010

Matlab系列之GUI设计基础

打开GUI可以在Matlab命令窗口输入：guide，就可以打开GUIDE的界面，也可以从主页窗口新建菜单中找到GUIDE，同时发现，还有个App Designer的选项，这个是R2016A版本开始推出的一个GUIDE的替代品，有新的组件，也更容易上手，不过只支持有限的2D图形，所以相对GUIDE还是有些不足，但是学了GUIDE再去操作App Designer显然是更轻松的一件事。

07.HTML实例

07.HTML实例 HTML 实例 HTML 基础非常简单的HTML文档 HTML 标题 HTML 段落 HTML 链接 HTML 图片 HTML 标题 HTML 标题在html源码中插入注释

HTML标记之Form表单

从访问的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。是客户端与服务器端的交流途径。

html下拉框设置默认值_html下拉列表框默认值[通俗易懂]

HTML 和 JavaScript 综合练习题一、单项选择 1. Web 使用( D )在服务器和客户端之间传输数据。 A.FTP B. Telnet C. E-mail D. HTTP 2. HTTP 服务默认……

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字

前端开发必备之Chrome开发者工具（上篇）

本文介绍的 Chrome 开发者工具基于 Chrome 65版本，如果你的 Chrome 开发者工具没有下文提到的那些内容，请检查下 Chrome 的版本简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析打开 Chrome 开发者工具的方式有：在Chrome菜单中选择更多工具 > 开发者工具在页面元素上右键点击，选择 “检查” 使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac

011

基于 HTML5 的工业互联网 3D 可视化应用

工业企业中生产线处于高速运转，由工业设备所产生、采集和处理的数据量远大于企业中计算机和人工产生的数据，生产线的高速运转则对数据的实时性要求也更高。破解这些大数据就是企业在新一轮制造革命中赢得竞争力的钥匙。因此，工业生产可视化系统是工业制造业的最佳选择。

ArcGis点抽稀方法

1、如果我们用Arcgis打开一个点数据很多的文件，并对其进行标注的话，会显得很乱，而且无法获取有效的数据，为此我们需要随着比例尺的放大逐渐显示信息，点抽稀就是一个不错的选择；

Html再学

1. Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包括文字、图片、视频等。 2. CSS样式是展现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片的轮换）。可以这个理解，有动画的，有交互的一般都是用JavaScript来实现。 4. 标签之间是可以嵌套的。 Html文件的基本

~~ 图像超链接 targrt="_blank""_self" <href=""> ~~ 属性介绍标签属性 <id ="two"> 属性介绍注释标签字符空格符 < < > > & & ￥ ¥ © © ® ® ° ° -+ ± * × 表格标签展示/显示数据定义表格的标签定义表格行 html表头部分定义表格行定义单元格/内容加粗定义单元格/内容 </tobdy>
……
…… ……
left center right border 边框 1 "" 默认没有边框像素值 cellpadding 默认1像素 <-> cellspacing 默认2像素 >-< width 宽度 height 高度合并单元格 rowspan 跨行合并数量最上侧 colspan 跨列合并数量最左侧列表标签《布局》有序

无序

03