html - 按钮内的标签 - 单击按钮并激活标签

Question

当您单击此按钮时，如果您单击“Hello”文本，它将仅选中复选框。如果您单击按钮而不是文本，则不会选中该框。我怎样才能做到无论我在哪里点击按钮，它都会选中该框？

<button>
    <label for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

标签： htmlbuttonlabel

Answer 1

您需要将标签设置为按钮的全宽和全高，如下所示：

<button style="padding: 0;">
    <label style="display: block; padding: 20px;" for="myId">Hello</label>
</button>


<input id="myId" type="checkbox" />

这是小提琴： https ://jsfiddle.net/hxoqrf7v/