Oliver Spryn Oliver Spryn - 1 month ago 6
CSS Question

Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

I am trying to use the Twitter Bootstrap button group as an actual set of form input controls. By default, these button groups can be made to function like a radio button or checkbox group, but since they use the

<button>
element, they cannot actually be used like a radio button or checkbox.

In my research, I found this site which uses CSS to make these bootstrap buttons actually control radio buttons and checkboxes. The only issue is they use rather recent features of CSS to work, and therefore, require IE9 or above to work.

I would like to extend support to IE8. Is there another (perhaps JS controlled) solution which would offer the same features as the above link without the steep CSS requirements?

Thank you for your time.

Answer

Bootstrap 2

Try this fiddle

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

Script:

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

then get buttonvalue server side

Comments