：当输入标签在标签标签 CSS 内时检查不工作答案

【问题标题】：:checked not working when input tag is inside label tag CSS：当输入标签在标签标签 CSS 内时检查不工作
【发布时间】：2016-10-06 18:30:59
【问题描述】：

我可以让这段代码工作：

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<input id="UniqueCheckbox" type="checkbox">
<label>Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

在我尝试设置样式的应用程序中，标签内有输入，但我无法让它工作：

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

我正在设计的应用程序非常锁定，我无法更改它。有没有办法通过锁定 HTML 结构来解决这个问题？理想情况下只使用 CSS。

编辑

我很乐意考虑 jquery 解决方案。

谢谢，

【问题讨论】：

好吧它不是兄弟
stackoverflow.com/questions/1014861/…
嗨，你能解释一下吗？
您使用了同级选择器并且输入没有同级。正如链接所示，没有标准的方法来拥有父选择器。

标签： javascript jquery html css

【解决方案1】：

问题在于~ 选择器。见W3C

~ 选择紧跟在前一个参数之后的元素。因此，当您在第一个示例中使用 HTML 时，它可以工作，因为它会在 #UniqueCheckbox

之后的元素立即查找该数据名称属性

在玩了一会儿你的代码之后，没有简单的方法可以使用纯 CSS（我可以看到）来做到这一点，即使有过渡也是如此。 HTML 的嵌套方式太奇怪了，无法使用 CSS 来定位……实际上，定位并不难——但是使用 :checked 伪类作为触发事件来更改另一个 div，在这种情况下，非常奇怪的事情。在其他示例（如下拉菜单）中，当使用 psuedoclass 作为触发器时，您会看到触发的元素通常在调用 psuedo 类的元素内部 ..

Look at this dropdown menu example 并注意 nav li:hover ul 的工作原理以及 HTML 的结构如何工作

我会推荐一个使用 jQuery ala this 的简单点击处理程序

【讨论】：

谢谢。这就是我所担心的——这是不可能的。
嗯，我不知道如何用复选框将其放置到位。我没有asp，只有html、css、javascript、jquery。代码是什么？

【解决方案2】：

如果有人感兴趣，可以用 jquery 解决：

 
$(document).ready(function(){
    $("#UniqueCheckbox").click(function(){
  if ( typeof hidden === 'undefined' || hidden == true ) {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).show(100); 
      hidden = false;
    } 
 else {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).hide(100); 
      hidden = true;
  }
      });  
});

[data-field-name="HideAndShow"] {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div style="" data-field-name="HideAndShow">
  Show and Hide This
</div>

【讨论】：