I want to have a checked state for group chexboxes in Bootstrap 3.0.2. docs
html:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123" data-toggle="button"> <span class="glyphicon glyphicon-star"></span> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> <span class="glyphicon glyphicon-star-empty"></span> 456
</label>
</div>
But data-toggle="button" doesnt works. jsfiddle
How to fix it? Thanks.
To actually check the input, you will need to add the checked property. This will not actually make it appear checked, but is important if you are using this in a form and actually want the input to be checked by default.
<input type="checkbox" name="123" data-toggle="button" checked>
To make it look checked (or pressed), add class .active to the .btn label wrapping it.
<label class="btn btn-default active">
http://jsfiddle.net/ZktYG/2/
Not sure why data-toggle="buttons" isn't working. Could be related to this: https://github.com/twbs/bootstrap/issues/8816
For now, you can achieve the same effect through JS by doing something like:
$('.btn-group').on('input', 'change', function(){
var checkbox = $(this);
var label = checkbox.parent('label');
if (checkbox.is(':checked')) {
label.addClass('active');
}
else {
label.removeClass('active');
}
});
It's been a couple of years; however, I wanted to address the actual problem above of why the data-toggle="button" wasn't working.
The answer was to remove the data-toggle="button" on the <input>'s.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="123"> 123
</label>
<label class="btn btn-default">
<input type="checkbox" name="456"> 456
</label>
</div>
I solved this by making a custom attribute that housed whether it was active or not, then setting that value within JQuery's click event.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active check_button" id="check1">
<input type="checkbox" autocomplete="off" checked data-checked=true> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary check_button" id="check2">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 2
</label>
<label class="btn btn-primary check_button" id="check3">
<input type="checkbox" autocomplete="off" data-checked=false> Checkbox 3
</label>
</div>
You can see a working example of this within the fiddle,
https://jsfiddle.net/jeffbeagley/DTcHh/34024/
Related
I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>
I am trying to validate this section of the form but whichever button is selected, option1 returns false. How can I get each radio to have different values when they are active/inactive or alternatively get a value from the button-group?
$(function register(){
$('.err').hide();
$("#submit").click(function() {
if ($('#option1').prop("checked", false)){
$("#fcerr").show();
}
if ($('#option1').prop("checked")){
$("#fcerr").hide();
}
});
});
<div class="btn-group btn-group-justified btn-group-sm" data-toggle="buttons">
<label id="lopt1" class="btn btn-primary">
<input type="radio" name="option1" id="option1" autocomplete="off"> Staff
</label>
<label id="lopt2" class="btn btn-primary">
<input type="radio" name="option2" id="option2" autocomplete="off"> Client
</label>
</div>
<div><label class="err" id="fcerr">Error Message</label></div>
<input name="register" type="submit" value="Register" class="btn btn-primary btn-lg btn-block" id="submit">
I have also tried getting the values of the radio boxes but they are always "on" regardless of which radio is active.
var client = $("#option2").val();
alert(client);
With your code:
if ($('#option1').prop("checked", false)){
$("#fcerr").show();
}
You are actually setting the property "checked" to be false, everytime. After that is done the if statement recieves a truthy value so it will execute what's inside the if block.
Try your validation like this instead:
if($('#option1').is(':checked')){
//...
}
Also, if you want your inputs to actually behave as a group (meaning only one can be checked at a given time) you have to share the same name attribute, you can update your html to:
<label id="lopt1" class="btn btn-primary">
<input type="radio" name="myOptions" id="option1" autocomplete="off"> Staff
</label>
<label id="lopt2" class="btn btn-primary">
<input type="radio" name="myOptions" id="option2" autocomplete="off"> Client
</label>
A few things:
You didn't include a javascript framework in your code snippet, though your question is tagged with jQuery.
The 4th line if ($('#option1').prop("checked", false)){ is changing the value that you're trying to evaluate.
The option elements should share the same name attribute if you want to treat them as a group that can be validated
I have the following view in angular.js where I have several checkboxes for various terms of an agreement.
<div class="modal-body">
<div class="col-xs-12 form-group">
<p>I acknowledge that I understand the following:</p>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term1">Some term1 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here
is not a credit transaction.
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
</label>
</div>
</div>
Then I have a button below it as follows and I need to enable this button only when all the checkboxes are checked. Please note that this mark up comes in a dynamically loaded modal window. I have tried the way which is posted in this url by doing some basic logic change to make it work as per my need -> How to check if any Checkbox is checked in Angular. It doesn't seems to be working when view is loaded dynamically and watcher throws error in console when it is not able to find it.
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>
As you have it set up currently, this should work:
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.term1 && agreement.term2 && agreement.term3 && agreement.term4 && agreement.term5 && agreement.term6">Confirm</button>
Using ng-if, the button would only be displayed if all 6 conditions are true.
Another alternative which I personally use is the checklist-model add on. Using this, you can add all of the checkboxes into a single array model, and then just check the length like so:
Give each checkbox the model:
<div class="checkbox" >
<label>
<input type="checkbox" checklist-model="agreement" checklist-value="true"> Some term1 goes here
</label>
</div>
// Repeat for all checkboxes
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.length === 6">Confirm</button>
As Paul pointed out, you can also use ng-disabled="agreement.length < 6" instead of ng-if if you wanted to disable the button rather than hide it altogether.
Add a function like the following to your scope:
$scope.submitDisabled = function() {
var allChecked = $scope.agreement.term1 && $scope.agreement.term2 &&
$scope.agreement.term3 && $scope.agreement.term4 &&
$scope.agreement.term5 && $scope.agreement.term6;
return !allChecked;
}
Then for you button do:
<button type="button" ... ng-disabled="submitDisabled()">Confirm</button>
This assumes you want the button visible, but disabled, rather than hidden.
Tried several ways but following way had worked for me. Instead of using watcher, I am calling the function on click to the view around the checkbox.
Following is the function:
$scope.agreement.doIfChecked = doIfChecked;
function doIfChecked(){
$scope.agreement.isAnyUnchecked = !($scope.agreement.term1 && $scope.agreement.term2 && $scope.agreement.term3 && $scope.agreement.term4 && $scope.agreement.term5 && $scope.agreement.term6);
}
And I have used ng-click directive to parent div of the input box as follows:
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term1"> Some term1 goes here.
</label>
</div>
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here.
</label>
</div>
And the mark up for the button goes as below where I am using ng-disabled directive appropriately:
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-disabled="agreement.isAnyUnchecked" ng-click=" $close();">Confirm</button>
I've been playing with this for the last hour and can't seem to figure out how to have one button toggle at a time. Also trying to have the button change to different color So if I click button1 it toggles. If I then click button2, then button1 untoggles and button2 toggles.
Here's what I have so far
<div class="Demo-boot" style="padding:30px;">
<button type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Here it is in action:
http://www.bootply.com/MaxkTJs3HH
You need to set it up in a button group like this::
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Button 2
</label>
</div>
first add some ids to the buttons
<div class="Demo-boot" style="padding:30px;">
<button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Next add some jquery
$('#button_one').click(function (e) {
$('#button_two').removeClass('active')
});
$('#button_two').click(function (e) {
$('#button_one').removeClass('active')
});
the running product : http://www.bootply.com/tT4yYWxjyk
Hi, I'm using Bootstrap's .btn-group class like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="radio-popup-position" id="radio-popup-style-1" checked>button-1
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-2">button-2
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-3">button-3
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-4">button-4
</label>
In my app I need to "manually" select a button with JS and currently I'm doing it like this:
$('#radio-popup-style-rect-1').parent().addClass('active');
$('#radio-popup-style-rect-1').get(0).checked = true;
$('#radio-popup-style-rect-2').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-3').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-4').removeAttr('checked').parent().removeClass('active');
... times four, for each case that I need to select one of the buttons. That's not such a big deal if I have just 4 buttons, but now I need to have 13. Which means a lot of code.
My questions - does Bootstrap have a function that I can call to select a button and automatically deselect other buttons from the same group?
Cheers
You can use the attribute selector
$('[id*="radio-popup-style-"]').click(function(){
$(this).prop('checked', true).parent().addClass('active');
$('[id*="radio-popup-style-"]').not($(this)).removeAttr('checked').prop('checked', false).parent().removeClass('active');
});
JSFIDDLE: http://jsfiddle.net/TRNCFRMCN/6o1k1cvo/1/.
About regex in attribute selector: http://www.thegeekyway.com/css-regex-selector-using-regular-expression-css/.
You can use built-in BS method to toogle button state:
(you need default button.js on your page)
https://github.com/twbs/bootstrap/blob/master/js/button.js#L52-L66
http://getbootstrap.com/javascript/#buttons
$('#the-button-id-you-need').button('toggle');
There is no such function/method. However this is unnecessary.
Use class attribute instead of id. Then the code become much simpler:
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="radio-popup-position" class="radio-popup-style" checked>button-1
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-2
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-3
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-4
</label>
JS:
var aEls = $('.radio-popup-style-rect');
aEls.prop('checked', false).parent().removeClass('active');
aEls.eq(0).prop('checked', true).parent().addClass('active');
$("body").on("click", "label.btn", function(){$(this).find("input")[0].click();});