在输入元素之外更改类
在输入元素之外更改类
提问于 2021-03-28 07:39:16
我有一个带有复选框的输入元素：
<input type="checkbox" id="ID1" name="ID1" checked>有些地方(在输入字段之外)，我希望有一个文本，它将根据ID1输入元素的检查状态来更改其外观。
类似于：
<span for id='ID1' class='Class1'>TEST</span>如何获得文本与输入字段状态之间的依赖关系，以及如何通过检查和取消选中复选框将Class1更改为Class2？类更改文本的背景色。我知道如何在相同的元素中这样做。但有两种不同的元素？或者，由于"for“语句，可以通过输入元素的ID访问类吗？我正在使用javascript。
谢谢你的帮助！
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-03-28 07:48:36
将属性添加到复选框中，其中包含相关跨度的ID。
document.querySelector("#ID1").addEventListener("click", function() {
let rel = document.getElementById(this.getAttribute("rel"));
if (rel) {
if (this.checked) {
rel.classList.add("Class1");
rel.classList.remove("Class2");
} else {
rel.classList.add("Class2");
rel.classList.remove("Class1");
}
}
});.Class1 {
background-color: red;
}
.Class2 {
background-color: blue;
}<input type="checkbox" id="ID1" name="ID1" checked rel="span1">
<span id="span1" class='Class1'>TEST</span>
Stack Overflow用户
发布于 2021-03-28 07:46:20
首先:不能/不应该有两个Id相同的元素
const checkbox = document.getElementById("ID1");
const span = document.getElementById("SpanID1");
checkbox.addEventListener('change', function() {
if (this.checked) {
span.innerHtml= 'TEST Checked'
} else {
span.innerHtml= 'TEST Unchecked'
}
});Stack Overflow用户
发布于 2021-03-28 07:56:33
如果您想要CSS解决方案，可以将输入框作为目标，然后使用:checked选择器，然后是+，然后是相邻的元素。
CSS：element+element div +p选择第一个放在
<div>元素之后的<p>元素
.Class1 {
background-color: yellow
}
#ID1:checked + .Class1 {
background-color: skyblue
}<input type="checkbox" id="ID1" name="ID1" checked>
<span for id='ID1' class='Class1'>TEST</span>
查看这里，了解更多关于不同CSS选择器的信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66839320
复制相关文章
相似问题
腾讯云开发者
