I'm trying to use the checkbox button functionality described on the bootstrap page here under the subsection "checkbox". I copy pasted the html(shown below) from that page into a jsfiddle and checkboxes suddenly appear inside the buttons. How can I get rid of them? I couldn't find any mention of this issue on the Bootstrap site or using Google.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">Option 1</label>
<label class="btn btn-primary">
<input type="checkbox">Option 2</label>
<label class="btn btn-primary">
<input type="checkbox">Option 3</label>
</div>
EDIT: I found that calling .hide() on the input checkbox elements hides the checkbox and the checkboxes then look just like buttons as in Bootstrap 3.
In your JSFIDDLE you're are using Bootstrap v2.0.4 .. that Boostrap doc site uses the newer Bootstrap v3.1.1
Check which version you have loaded in your development environment
For Boostrap 2.x.x you would need to do
<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>
http://getbootstrap.com/2.3.2/javascript.html#buttons
try this code for check boxes:
<div>
<label class="col-md-4">
<input type="checkbox"> Option 1
</label>
<label class="col-md-4">
<input type="checkbox"> Option 2
</label>
<label class="col-md-4">
<input type="checkbox"> Option 3
</label>
</div>
It is done in http://jsfiddle.net/g3mu8/307/.
and and button here:
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="button">option1</button>
<button type="button" class="btn btn-primary" data-toggle="button">option2</button>
<button type="button" class="btn btn-primary" data-toggle="button">option3</button>
</div>
done here http://jsfiddle.net/g3mu8/308/
Related
I would like to set a selected button in Bootstrap's btn-group:
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
How can I pre-select option 5? This answer suggests that I can add active class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.
Here is a fiddle: http://bootply.com/90490
Here is another fiddle with the active class applied, showing why it isn't the correct solution: http://bootply.com/90491 - click on any of the other buttons, and button 5 still remains active.
Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.
Markup
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
</div>
</div>
JavaScript
$(document).ready(function() {
$(".btn").first().button("toggle");
});
If you want to, for example, pre-toggle the third button, you can use the slice function like so:
$(".btn").slice(2,3).button("toggle");
Alternatively you could assign identifiers to the buttons.
Here's my fiddle: http://bootply.com/90501
I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttons which gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>5
</label>
<label class="btn btn-default">
<input type="radio">6
</label>
<label class="btn btn-default">
<input type="radio">7
</label>
</div>
As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:
The data-toggle="buttons" in the btn-group div.
The active class on the label 5.
The checked on the <input type="radio"> for 5.
I hope this helps others.
You can remove checked from input tag of first button,and add active class on condition .
eg:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary" [ngClass]="{'active': splitOption=='equal'}" >
<input type="radio" name="options" id="option1" autocomplete="off" > =
</label>
</div>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>
I have 3 different sets of radio buttons on the same page. The problem I am experiencing with them is that when a button in another btn-group is pressed it will toggle the state of the buttons in the previous or next btn-group. They don't seem to be independent. Here's the code:
<div id="file1" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>
<div id="file2" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>
When a button within div file1 is clicked it toggles the state of a button in div id file2
I've tried using button.js with this, but no luck.
I've tried various different variations of data-toggle="button"
Any ideas?
Demo
Your HTML structure for bootstrap radio buttons is wrong.
<div id="file1" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option1" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option1" /> No
</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option2" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option2" /> No
</label>
</div>
Aside:
You're using jQuery; Please don't use onClick in your HTML. You would set up those events like this (though there is a way that involves less code).
$(function(){
$('.btn').button(); // this is for the radio buttons.
// this replaces your inline JS
$('#file1 .btn-danger').on('click', function(){
$('#mandatory1').val('no');
});
$('#file2 .btn-danger').on('click', function(){
$('#mandatory2').val('no');
});
});
Demo
this should fix your problem:
<div id="file1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
<label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
<label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>
**Bootstrap 3
I'm trying to make each set of button group unique but the different groups are interfering with each other
<label>Payment Mode</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
<button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>
<label>Payment Period</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
How do i keep it unique in it's own group
You may want to use the Bootstrap provided radio button groups (http://getbootstrap.com/javascript/#buttons), and then use the reset method to clear the other group..
HTML:
<label>Payment Mode</label>
<div id="mode-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
</label>
<label class="btn btn-primary">
<input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
</label>
</div>
<label>Payment Period</label>
<div id="period-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="period" id="period1"> Immediate
</label>
<label class="btn btn-primary">
<input type="radio" name="period" id="period2"> More Than 1 day
</label>
</div>
jQuery:
// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){
$("#period-group").button('reset');
});
Demo: http://bootply.com/86422
Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.
Use something like this to set an active class per btn-group:
$('.btn-group button').click(function()
{
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});
If you are using AngularJS the Angular UI bootstrap has a great solution.
Basically do the following using the btnRadio directive.
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
To keep unique button just don't use class="btn-group":
<label>Payment Mode</label>
<div>
<button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
<button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>
<label>Payment Period</label>
<div>
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
This class is used for series of buttons. Check documentation of Buttons Group
Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other.
After countless hours of research, I'm still dumbfounded on how to get the checked attribute working for button radio groups for Bootstrap. I'm trying to default "Excellent."
Even though I know for sure radio inputs are checked and not selected, I even tried selected and nothing works.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
Excellent </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Good">
Good </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Poor">
Poor </label>
</div>
If clarification is needed, please let me know.
In twitter bootstrap, you will indicate the default value using the 'active' class.
So, for your example, if you are using Twitter Bootstrap, the following code will use Excellent as default checked.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default **active**">
<input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
Excellent </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Good">
Good </label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls" value="Poor">
Poor </label>
</div>
When you toggle over the buttons, you add/remove the class - 'active' from the label's class.
For an example, check this out - http://getbootstrap.com/javascript/#buttons - Radio
Looks like the question and answer are using bootstrap 3.0. I had the same question but with bootstrap 2.3.
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn active"> Option 1</button>
<button class="btn"> Option 2</button>
<button class="btn"> Option 3</button>
</div>
Two things:
You should use different IDs for each of your <input> elements -- they're supposed to be unique!
Your example works for me! Check it out at JSFiddle!