Twitter Download Button Radio Control Buttons Buttons / Checkboxes

Question

I am trying to use the Twitter Bootstrap button group as an actual set of form controls. By default, these button groups can be created as a radio button or a group of flags, but since they use the <button> element, they cannot actually be used as a switch or check box.

In my research, I found this site that uses CSS to get these bootstrap buttons to control radio buttons and checkboxes. The only problem is that they use fairly advanced CSS features to work, and therefore require IE9 or higher to work.

I would like to expand support for IE8. Is there another (possibly JS-controlled) solution that will offer the same features as the above link, without the tough CSS requirements?

Thank you for your time.

Answer 1

Bootstrap 3 has a "native" solution ...

Now for this problem, there is a “true” Bootstrap solution that seems to work just fine in 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 details.

Answer 2

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

Answer 3

With Bootstrap 3.2, place the hidden input in the middle of the button group container. Instead of textual content, we take the value of the data field.

 <div id="test" class="btn-group checkit" data-toggle="buttons-radio"> <button type="button" data-value="1" class="btn btn-default active">Yes</button> <input type='hidden' name="testfield" value='1'> <button type="button" data-value="0" class="btn btn-default ">No</button> </div> 

Now insert a small javascript fragment into the download part of your template.

 $('.checkit .btn').click(function() { $(this).parent().find('input').val($(this).data("value")); }); 

Therefore, you only need to add .checkit to the button group and insert a hidden input field.

With bootstrap 3.2 you can directly use button groups with radio or checkbox inputs

 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="options" id="option1" value="1" /> Yes </label> <label class="btn btn-default"> <input type="radio" name="options" id="option2" value="0" /> No </label> <label class="btn btn-default"> <input type="radio" name="options" id="option3" value="42" /> Whatever </label> </div> 

See here: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

Answer 4

You can use hidden form elements and javascript to use the state of the button to trigger the states of the form element.

Answer 5

CSS only solution:

HTML:

 <div class="btn-group"> <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label> <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label> </div> 

SCSS / LESS:

  label.btn { margin-bottom: 0; padding: 0; overflow: hidden; span { display: block; padding: 10px 15px; } input[type=checkbox] { display: none; } input:checked + span { display: block; color: #fff; background-color: #285e8e; } } 

Jsfiddle here