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

是一种常见的前端开发需求，可以通过使用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属性来改变文本颜色。

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

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