Html 切换复选框按钮不工作

我刚做了一个自定义的

复选框

按钮，结果是，

HTML：

 <input type=checkbox id="a">
  <label for="a">
    <button>click me</button>
  </label>

#a {
    display:none;
}
#a ~ label button {
    background:yellow;
}
#a:checked ~ label button {
    background:red;
}

但这不起作用，为什么？我想知道为什么它不起作用

如果我移除

按钮

并按如下方式检查样式：

#a {
    display:none;
}
#a ~ label {
    background:yellow;
}
#a:checked ~ label {
    background:red;
}

---

它很好用任何人都可以回答我的初始代码不起作用的原因。

在这种情况下，您可以单击

按钮
而不是
复选框
。所以我更新了你的HTML，用
span
替换了
按钮，它的工作很有魅力。若您必须保留按钮，那个么在单击按钮时需要选中一些javascript代码复选框

我更新了你的小提琴


HTML

在这种情况下，单击
按钮
非
复选框
。所以我更新了你的HTML，用
span
替换了
按钮，它的工作很有魅力。若您必须保留按钮，那个么在单击按钮时需要选中一些javascript代码复选框

我更新了你的小提琴


HTML

演示：

CSS:

首先，去掉
a
的
显示：none
css规则。如果输入是隐藏的，如何切换它

使用现有代码：
演示：

HTML:

如果将属性
选中
添加到输入中，则代码将按预期工作。
演示：

CSS:

首先，去掉
a
的
显示：none
css规则。如果输入是隐藏的，如何切换它

使用现有代码：
演示：

HTML:

如果您将属性
选中
添加到输入中，您的代码将按预期工作。
好吧，您似乎试图理解为什么它不工作，而不是解决方案是什么

您的代码无法工作，因为标签的操作不会传播到具有自定义单击行为的子元素。所以，当你把一个按钮，或锚等，它不会工作

至少不是自动的

但是，如果要使按钮更改复选框值，可以向其添加单击事件，然后将该单击传播到复选框：


document.querySelector（“按钮”）.addEventListener（“单击”），函数（e）{
e、 target.parentNode.click（）；//将click事件传播到标签
});
#a{
显示：无
}
#a~标签按钮{
背景：黄色
}
#a:选中~标签按钮{
背景：红色
}

点击我
好吧，您似乎在试图理解为什么它不起作用，而不是解决方案是什么

您的代码无法工作，因为标签的操作不会传播到具有自定义单击行为的子元素。所以，当你把一个按钮，或锚等，它不会工作

至少不是自动的

但是，如果要使按钮更改复选框值，可以向其添加单击事件，然后将该单击传播到复选框：


document.querySelector（“按钮”）.addEventListener（“单击”），函数（e）{
e、 target.parentNode.click（）；//将click事件传播到标签
});
#a{
显示：无
}
#a~标签按钮{
背景：黄色
}
#a:选中~标签按钮{
背景：红色
}

点击我
问题似乎是，单击事件由按钮使用，并且未到达标签，因此复选框的选中状态未切换。因此，您可以在没有按钮的情况下使其工作

可能的解决方案是使用脚本在单击按钮时触发对父标签的单击

如果您仍然在寻找css解决方案，那么下面的内容就是一个没有按钮的解决方案


input.btn{
显示：无；
}
input.btn+标签{
光标：指针；
背景#f4；
字体系列：Calibri；
边界：1个山脊#ccc；
填充：4px6px；
边界半径：4px；
盒影：0px 1px 1px；
}
input.btn+标签：悬停{
盒影：0px 1px 2px；
背景：#f6f6f6；
}
input.btn+标签：活动{
背景#f1f1；
盒影：0px 1px 1px插页；
}
输入。btn：选中+标签{
盒影：0px 1px 3px插页；
背景:#f3；
}

点击我
单击我
问题似乎是按钮使用了单击事件，而未到达标签，因此复选框的选中状态未切换。因此，您可以在没有按钮的情况下使其工作

可能的解决方案是使用脚本在单击按钮时触发对父标签的单击

如果您仍然在寻找css解决方案，那么下面的内容就是一个没有按钮的解决方案


input.btn{
显示：无；
}
input.btn+标签{
光标：指针；
背景#f4；
字体系列：Calibri；
边界：1个山脊#ccc；
填充：4px6px；
边界半径：4px；
盒影：0px 1px 1px；
}
input.btn+标签：悬停{
盒影：0px 1px 2px；
背景：#f6f6f6；
}
input.btn+标签：活动{
背景#f1f1；
盒影：0px 1px 1px插页；
}
输入。btn：选中+标签{
盒影：0px 1px 3px插页；
背景:#f3；
}

点击我
如果我用您的工作代码替换fiddler中的css，请单击我。它仍然不起作用，是吗？你能检查所有答案吗？为什么要将“显示”设置为“无”？此外，我认为您应该使用QUOTE type=“checkbox”@Arvaan ebilgin在他的回答中指出，如果您用span替换按钮，它就会工作，如果您删除按钮并保持标签，它就会工作，如果我用您的工作代码替换您fiddler中的css。它仍然不起作用，是吗？你能检查所有答案吗？为什么要将“显示”设置为“无”？此外，我认为您应该使用QUOTE type=“checkbox”@Arvaan ebilgin在他的回答中指出，如果您将按钮替换为span，它会起作用，如果您移除按钮并保留标签，它会起作用，单击标签不也会切换复选框吗？为此，输入需要在标签内，或者标签必须具有for属性
<input type=checkbox id="a">
<label for="a">
    <span>Click me</span>
</label>

#a {
    display: none;
}
#a + label span {
    background:yellow
}
#a:checked + label span {
    background:red
}

#a ~ label button {
    background:yellow
}
#a:checked ~ label button {
    background:red
}

<input type="checkbox" checked id="a" />
<label for="a">
    <button>click me</butto>
</label>

#a {
    display:none;
}
#a ~ label button {
    background:yellow;
}
#a:checked ~ label button {
    background:red;
}