Question

我有点尴尬，我无法找到解决这个简单任务的方法。

很容易在同一行中创建一个复选框和一个span-tag，我所做的就是这样：

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

我在复选框中设置了一个功能，它显示/隐藏了layer_1，效果非常好。我还用一个带有jQuery的事件设置了一个span-tag，它在网站上显示了一些文字，但后来我遇到了一个问题，我无法触摸＆＃34; span的文本，复选框有点阻止文本，无论我在哪里点击，只要我点击该行，哪个复选框和跨度，我只能选中复选框。

似乎复选框占据整行，并且span-tag上的click事件被复选框阻止。

我不知道如何做到这一点，因为我不希望复选框占据一条线而另一个标记符号，更糟糕。

Answer 1

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

单击或点击<label>并将其与表单控件相关联时，还会为关联的控件引发结果单击事件。 - MDN Element docs

但是，display元素的默认label属性是“内联”，这意味着它们通常与其他“内联”元素显示在同一行，例如input s ：

<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;
}

在同一行中设置复选框和跨度，并在跨度中添加一个clickevent

1 个答案: