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

时间:2014-06-14 14:03:07

标签: css twitter-bootstrap checkbox html-form

我使用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/

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

2 个答案:

答案 0 :(得分:3)

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

<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/

答案 1 :(得分:-2)

将您的标签包裹在输入元素周围,使整个区域可以点击,并且它更适合于可用性