选中“在javascript中不带ID和class属性时更改文本颜色”复选框

我想在选中复选框时更改文本的颜色
首先，我想通知您，我不允许向其添加任何ID或类属性。
下面是示例代码

 <label style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
 <input type="checkbox" name="termsChkbx" />
 </label>

我已阅读并同意条款和条件

据我所知，我们可以使用

document.getElementById（）

document.getElementsByTagName（）

document.getElemntsByClassName（）

我试过了，但没用。

<script>
        function myFunction() {
    var chkbox = document.getElementsByTagName("label");
    if(chkbox.checked){
        document.getElementsByTagName("label").style.color = "#000000";
    }
}
</script>

函数myFunction（）{
var chkbox=document.getElementsByTagName（“标签”）；
如果（chkbox.checked）{
document.getElementsByTagName（“标签”）.style.color=“#000000”；
}
}

因为代码不包含任何ID和类属性。

---

那么怎么做呢？

您可以使用jqueryselector（它将选择所有元素并将它们放入数组中，然后选择其中的元素[0]）

---

First\u checkbox=document.queryselectoral（“输入[type='checkbox']”[0]；

您可以使用jqueryselector（它将选择所有元素并将它们放入数组中，然后选择其中的元素[0]）

---

First\u checkbox=document.querySelectorAll（“input[type='checkbox']）[0]；

如果您使用的是

jQuery

$（文档）.ready（函数（）{
$（“输入[type=checkbox]”）。在（'click'，function（）上{
$（this.parent（）.toggleClass（“黑色”）；
})
})

.black{
颜色：黑色！重要；
}

我已阅读并同意条款和条件

如果您使用的是

jQuery

$（文档）.ready（函数（）{
$（“输入[type=checkbox]”）。在（'click'，function（）上{
$（this.parent（）.toggleClass（“黑色”）；
})
})

.black{
颜色：黑色！重要；
}

我已阅读并同意条款和条件

您可以分配一个单击处理程序并将当前元素传递给它。然后您可以使用当前元素导航到父元素并更新其属性

函数更新颜色（el）{
el.parentNode.style.color=el.checked？“蓝色”：“#FF0000”
}

我已阅读并同意条款和条件

您可以分配一个单击处理程序并将当前元素传递给它。然后您可以使用当前元素导航到父元素并更新其属性

函数更新颜色（el）{
el.parentNode.style.color=el.checked？“蓝色”：“#FF0000”
}

我已阅读并同意条款和条件

一个纯粹的

CSS

解决方案，在HTML结构上有一些变化

input[type=checkbox]：选中+span{
颜色：蓝色！重要；
字体大小：正常！重要；
}

我已阅读并同意条款和条件

一个纯粹的

CSS

解决方案，在HTML结构上有一些变化

input[type=checkbox]：选中+span{
颜色：蓝色！重要；
字体大小：正常！重要；
}

我已阅读并同意条款和条件

除非使用JQuery，否则无法访问没有ID或类的元素，为什么不添加ID呢？@KobyDouek事实上，您可以添加ID。尽管添加ID是正确的easier@qxz如果他有一个以上的标签怎么办？@KobyDouek？由于复选框有一个

名称

，您也可以使用您无法访问没有ID或cla的元素ss除非你使用JQuery，为什么不直接添加一个ID呢？@KobyDouek实际上你可以，虽然你是对的，添加一个ID会easier@qxz如果他有不止一个标签怎么办？@KobyDouek？因为复选框有一个

名称

，你也可以使用'jqueryselector'？嗯？字体：'jqueryselector'？嗯？字体：使用纯CSS的好主意…难以置信我没有想到这不会解决可能有多个复选框的问题，但是--我可以建议更改为

input[type=checkbox][name=termsChkbx]：checked+span

？@重点是通过选择复选框来更改文本的颜色，如果您希望复选框具有不同名称的相同功能，该怎么办。使用纯CSS的好主意…难以置信，我没有想到这不会解决可能有多个复选框的问题，不过--我可以建议更改为

输入吗[type=checkbox][name=termsChkbx]：checked+span

？@anied point是通过选择复选框来更改文本的颜色，如果您希望在具有不同名称的复选框上使用相同的功能，该怎么办。对于此行var chks=document.querySelectorAll（'input[name=“termsChkbx”]”），它是否只会选择具有名称的输入类型=“termsChkbx”？如果我们不提及name=“termChkbx”，它将更改每个输入类型的颜色？是的。您可以执行类似于

.querySelectorAll（'input[type=“checkbox”]”）的操作

但使用元素选择器是一种不好的做法，因为它会影响比所需的元素多得多的元素。如果可以向中添加类，那就更好了，但如果不能，则可以在all上附加事件，然后在其中添加筛选器，以仅更新此行var chks=document.querySelectorAll（'input[name=“termsChkbx“]”），它是否只会选择名称为“termsChkbx”的输入类型？如果我们不提及名称为“termsChkbx”，它将更改每个输入类型的颜色？是的。您可以执行类似于

.querySelectorAll（'input[type=“checkbox”]”的操作）

但使用元素选择器是一种不好的做法，因为它会影响比所需元素多得多的元素。如果您可以将类添加到元素选择器中，则效果会更好，但如果不可以，则可以在所有元素上附加事件，然后在其中添加筛选器，以仅更新必要的元素