标签中的 div 不会选中复选框答案

【问题标题】：div in label will not check off checkbox标签中的 div 不会选中复选框
【发布时间】：2025-12-16 08:10:02
【问题描述】：

当点击DIV标签时，这个HTML是否可以让DIV标签不检查输入复选框标签？我可以添加任何 CSS 来实现这一点吗？

<style>
#myId ~ label {
    position: fixed;
     overflow: auto;

     top: 0;
     left: 0;

    height: 100%;
     width: 100%;



    background-color: red;
}

#myId ~ label div {
    width: 100%;

    background-color: yellow;

    height: 25%;
}

#myId:checked ~ label {
    display: none;
}
</style> 

<input id="myId" type="checkbox" />
<label for="myId">
    <div>Hello</div>
</label>

【问题讨论】：

标签： html css checkbox label

【解决方案1】：

实际上是<label> 元素导致了问题； HTML 是这样连接的，当您在标签上指定 for 属性时，它会将其与具有匹配 name 或 id 属性的 <input> 元素联系起来。因此，当您单击标签时，复选框会发生变化。这是默认的浏览器功能。你可以从<div> 周围删除<label> 元素，或者如果你想使用一些css，你可以这样做：

选项 1

label {
  pointer-events: none;
}

选项 2

或者如果你不想覆盖所有标签的点击功能，你可以这样做：

label > div {
  pointer-events: none !important; /* disable from div */
}
label {
  pointer-events: auto; /* enable only on label */
}

选项 3

如果你想定位只是那个标签，你可以这样做：

label[for=myId] {
  pointer-events: none;
}

选项 4

或者

label[for=myId] > div {
  pointer-events: none !important; /* disable for div */
}
label[for=myId] {
  pointer-events: auto; /* enable for label */
}

选项 5 (JavaScript)

如果您仍然希望能够点击您的事件但防止点击事件冒泡到父标签，这称为“停止传播”，不幸的是没有直接的 CSS 方法；你必须使用一些 JavaScript。这是一个例子。 Documentation for event.stopPropagation

<body>
  <input id='myId' type='checkbox' />
  <label for='myId'>
    <div id='label-div'>Hello</div>
  </label>

  <script>
    var label = document.getElementById('label-div');
    label.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  </script>
</body>

label {
  pointer-events: auto;
  
  border: 1px solid blue;
  padding: 10px;
}
label > div {
  pointer-events: none !important;
  
  display: inline-block;
  border: 1px solid red;
  padding: 10px;
}

<input type='checkbox' id='myId' />
<label for='myId'>
  <div>Hello</div>
</label>

#unclickable {
  pointer-events: none !important;
 
  border: 1px solid blue;
  display: inline-block;
  padding: 20px;
}

label {
  pointer-events: all;
  
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

<input type='checkbox' id='myId' />
<div id='unclickable'>
  <label for='myId'>Hello</label>
</div>

【讨论】：

我希望能够点击标签标签，但我不想在点击 div 标签时点击标签标签。指针事件将禁用标签和 div 标签上的点击功能。有没有办法禁用 div 标签但启用标签标签以在单击时激活 checkox？
是的，但不是我所知道的 css。我已经用有关如何使用 javascript 的信息更新了答案。请参阅选项 5。
我正在尝试仅使用 CSS 执行此操作，因此这可以在禁用 javascript 的浏览器上运行。
您能稍微扩展一下您的用例吗？你这样做是为了工作、个人还是学校？禁用 javascript 的人是否真的可能会使用您正在创建的内容？那是非常非常小的一部分人。 searchenginepeople.com/blog/stats-no-javascript.html
即使您找到了一种仅使用 css 的方法，也不能保证所有浏览器都支持它。以下是有关哪些浏览器实现 pointer-events 属性的信息，例如：caniuse.com/#search=pointer-events