在同一行中设置复选框和跨度并向跨度添加点击事件答案

【问题标题】：set checkbox and span in the same line and add a clickevent to the span在同一行中设置复选框和跨度并向跨度添加点击事件
【发布时间】：2018-02-21 14:34:32
【问题描述】：

对于这个简单的任务我找不到解决方案，我感到有点尴尬。

在同一行中制作一个复选框和一个跨度标签很容易，我所做的就是这样：

<label class='checkbox' for='visible_1'>
    <input id='visible_1' class='visible' type='checkbox'>
    <span>Layer_1</span>
</label>

我为复选框设置了一个功能，它显示/隐藏 layer_1 并且效果很好。我还用jQuery为span-tag设置了一个事件，它在网站上显示了一些文本，但后来我遇到了一个问题，我不能“触摸”span的文本，复选框有点阻塞文本，不管在我点击的地方，只要我在哪一行点击，checkbox和span在哪，我只能选中checkbox。

似乎复选框占据了整行，并且跨标签上的点击事件被复选框阻止了。

我不知道怎么做，因为我不希望复选框占一行而跨度标签占另一个，这更糟。

【问题讨论】：

请发布一个工作代码sn-p。
span 必须包含在 label 中吗？您可以将span 放在标签之外，它应该可以工作（它们将保持在同一行，您将能够单击span）或者单击span 时，您要选中/取消选中该复选框并在同时在网站上显示一些文字？
@SergeyVorobey 谢谢你的回答，但如果我把跨度放在标签之外，它就不会再在同一行了。其实我是在 Stack Overflow 上学到的，把 span 放在标签里，这样我就可以在同一行中获取复选框和 span 的文本
正如路易斯所说。我们需要查看您的更多代码以提供帮助（您的函数、依赖项等）
@MinXIE 使用默认样式它应该在同一行（我刚刚尝试过），可能在你的 css 中破坏它。只是一个猜测（您可以将跨度放在标签之外，让他们成为兄弟姐妹，并尝试为他们的父母设置display: flex或为标签设置float:left）

标签： javascript jquery html checkbox

【解决方案1】：

label 元素的一个固有行为是充当其关联字段的触摸目标：

当<label> 被单击或点击，并且它与表单控件相关联时，也会为关联的控件引发单击事件。 -- MDN Element docs

但是，label 元素的默认 display 属性是“inline”，这意味着它们通常会与其他“inline”元素出现在同一行，例如 inputs：

<input id='visible_1' class='visible' type='checkbox'>
<label for="visible_1">Layer_1</label>

可能是您的网站有一些样式覆盖以使 label 成为块元素，如果您的正常用例是将元素及其标题包装在 label 元素中，这将是有意义的；通常希望这些控件位于不同的行上。如果是这种情况，那么您可以使用 CSS 来恢复默认行为——类似于：

.my-inline-label-section label {
  display: inline;
}

【讨论】：