javascript - :checked not working when input tag is inside label tag CSS

Question

我能够让这段代码工作:

[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 解决方案。

谢谢，

Answer 1

如果有人感兴趣，可以用 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>