CODEWITHSUNDEEP
csstwitter-bootstrapcheckboxforms
MS1
MS1

Reputation: 518

HTML Checkbox as a Button - Include Label and Button as clickable area

I use bootstrap 3 and a checkbox with a label. I managed to make the label tick off the checkbox when clicked, but the surrounding button design doesn't allow this feature.

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

To make that clear have a look at the jsfiddle: http://jsfiddle.net/etpq2/

I would like to tick off the box even when just the button is clicked.

Upvotes: 1

Views: 4884

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

Put the label around what you want to have clicked to make the checkbox change state.
In this case just apply the button class to the label. The form doesn't belong inside the button.

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

Upvotes: 2

albert
albert

Reputation: 8153

wrap your label around the input element, makes the whole area clickable, and its better for usability

Upvotes: -1

Related Questions