HTML复选框作为按钮 - 包括标签和按钮作为可点击区域

Question

我使用bootstrap 3和带标签的复选框。单击时，我设法使标签勾选复选框，但周围的按钮设计不允许此功能。

<div class="btn btn-primary"><form action="link.php"  method="post">
    <label for="jevattend_id">This is the label</label>
    <input type="checkbox" name="jevattend" id="jevattend_id" value="1"  onclick="form.submit();"/>
 </form></div>

为了清楚起见，请看一下jsfiddle：http://jsfiddle.net/etpq2/

即使只点击按钮，我也想勾选方框。

Answer 1

将标签放在您想要点击的内容上以使复选框更改状态。 在这种情况下，只需将按钮类应用于标签即可。表单不属于按钮内部。

<form action="link.php"  method="post">
    <label class="btn btn-primary">
        This is the label
        <input type="checkbox" name="jevattend" id="jevattend_id" value="1"  onclick="form.submit();"/>
    </label>
</form>

http://jsfiddle.net/etpq2/3/

Answer 2

将您的标签包裹在输入元素周围，使整个区域可以点击，并且更好地实现可用性