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.
Checkboxes and radio buttons are elements for making selections. Checkboxes allow the user to choose items from a fixed number of alternatives, while radio buttons allow the user to choose exactly one item from a list of several predefined alternatives.
You group radio buttons by drawing them inside a container such as a Panel control, a GroupBox control, or a form. All radio buttons that are added directly to a form become one group. To add separate groups, you must place them inside panels or group boxes.
Instead of applying button sizing classes to every button in a group, just add . btn-group-* to each . btn-group , including each one when nesting multiple groups.
To make checkbox behave like radio buttons with JavaScript, we can listen to the body element's click listener. And in the listener, we uncheck all the checkboxes and the check off the one that matches the one that's clicked. to add the checkboxes.
Bootstrap 3 has a "native" solution...
There now is a "true" Bootstrap solution for this problem, which appears to work fine also on older browsers. Here's what it looks like:
// get selection $('.colors input[type=radio]').on('change', function() { console.log(this.value); });
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="btn-group colors" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" value="red" autocomplete="off" checked> Red </label> <label class="btn btn-primary"> <input type="radio" name="options" value="orange" autocomplete="off"> Orange </label> <label class="btn btn-primary"> <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow </label> </div> <!-- jQuery and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
See the relevant Bootstrap documentation for more information.
Bootstrap 4
Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8 project.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With