选中复选框时更改标签文本颜色

是一种常见的前端开发需求，可以通过使用JavaScript和CSS来实现。

首先，我们可以使用JavaScript来监听复选框的状态变化。当复选框被选中时，我们可以通过修改标签的CSS样式来改变文本颜色。以下是一个示例代码：

HTML代码：

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox" id="myLabel">标签文本</label>

JavaScript代码：

var checkbox = document.getElementById("myCheckbox");
var label = document.getElementById("myLabel");

checkbox.addEventListener("change", function() {
  if (this.checked) {
    label.style.color = "red"; // 修改文本颜色为红色
  } else {
    label.style.color = "black"; // 恢复文本颜色为黑色
  }
});

在上述代码中，我们首先通过getElementById方法获取到复选框和标签元素。然后，我们使用addEventListener方法监听复选框的change事件。当复选框状态发生变化时，会触发回调函数。在回调函数中，我们通过判断复选框的checked属性来确定是否被选中，然后通过修改标签的style.color属性来改变文本颜色。

这种方法可以适用于任何标签和复选框的组合，可以根据实际需求进行修改和扩展。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动应用托管）：https://cloud.tencent.com/product/maap
• 云数据库（CDB）：https://cloud.tencent.com/product/cdb
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯会议：https://cloud.tencent.com/product/tc-meeting