Toggle one button at at time Bootstrap - javascript

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

Related

How to turn-on a radio button programmatically

I have the below posted radio button and input. I want to toggle the radio button programmatically so that, when I set this.iAreaOfCoverageForThresholdPasser.average-height to true, the radio button should be turned on "highlighted".
HTML:
<div id="idRadioButtonForAverageHeightDivision">
<input [value]="1" [(ngModel)]="iOperationPasser.averageHeight" name="radioGroupForOperations" type="radio" clrCheckbox (change)="onAverageHeightOptionSelected($event)" [(checked)]="averageHeight"/>
<label id="operation-average-height">
{{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | translate }}
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
</label>
</div>
.html:
<div id="idRadioButtonForAverageHeightDivision">
<input [value]="1"
name="radioGroupForOperations"
type="radio"
clrCheckbox
(change)="onAverageHeightOptionSelected($event)"
[(checked)]="iOperationPasser.averageHeight"
/>
<label id="operation-average-height">
<button class="btn btn-sm btn-icon" (click)="onClick()">
press
</button>
</label>
</div>
.ts
iOperationPasser = {
averageHeight: true
}
onClick = () => {
this.iOperationPasser.averageHeight=!this.iOperationPasser.averageHeight;
}

CSS: Depress Dropdown grouped with Radio Buttons

I'm using bootstrap to style a group of radio buttons that also include a dropdown.
When the user selects an option from the dropdown OTHER is not included as one of the radio buttons, so it looks like the last depressed radio button has been chosen when really C | D | E has been.
Is it possible to include the OTHER dropdown as one of the radio buttons so it looks depressed when the user selected C,D,E?
Codepen here if helpful: https://codepen.io/mayagans/pen/qBdaZEJ
$( document ).ready(function() {
$("input[name='test']").change(function(){
$("#results").text($("input[name='test']:checked").val());
});
});
$(".dropdownitems").click(function () {
var value = $(this).attr("href");
document.getElementById("results").innerHTML = value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testA" autocomplete="off" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testB" autocomplete="off" value="B">B
</label>
<div class="btn-group">
<label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="test" id="OTHER" autocomplete="off">OTHER<span class="caret"></span>
</label>
<ul class="dropdown-menu">
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</div>
<div id="results"></div>
I don't think that radio buttons are the good solution for this. You could just use "simple" buttons. Anyway, with bootstrap, you could add "active" to the button ( or radio button) class so that it will be shown as if it was pressed.
With single button
Pressed
<button type="button" class="btn btn-primary active">Click Me!</button>
Normal
<button type="button" class="btn btn-primary">Click Me!</button>
With your radio button it's the same
Pressed
<label class='btn btn-primary active'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Normal
<label class='btn btn-primary'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Example
<script>
$(document).ready(function () {
let pressedId
let buttonsId = ["a", "b"] // List of the buttons which are always visible
let dropDownsButtonId = ["c", "d", "e"] //List of the buttons of the dropdown
$("button").click(function () {
if (buttonsId.includes(this.id)) { //First "if" for "always visible" button
changeClass(this.id)
} else if (dropDownsButtonId.includes(this.id)) {//Second if for the button of the dropdown
changeClass("dropDownMenuButton")
}
})
function changeClass(id) {
if (pressedId !== undefined)
document.getElementById(pressedId).className = document.getElementById(pressedId).className.replace(" active", "")
document.getElementById(id).className += " active"
pressedId = id
}
})
</script>
<button type="button" class="btn btn-primary" id="a">a</button>
<button type="button" class="btn btn-primary" id="b">b</button>
<div class="dropdown">
<div class='btn-group'>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropDownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<ul class='dropdown-menu'>
<li>
<button type="button" class="btn btn-primary" id="c">c</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="d">d</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="e">e</button>
</li>
</ul>
</div>
</div>

How to change class name of a button

I have four buttons like this
<div class="btn-group">
<button id="btn-men" class="btn btn-default active"
i18n:translate="men">Men</button>
<button id="btn-women" class="btn btn-default" i18n:translate="women">Women</button>
<button id="btn-kids" class="btn btn-default" i18n:translate="kids">Kids</button>
</div>
And I have different css styles for the class "btn btn-default active" and "btn btn-default". what I want to know is if there is any way of changing the class name of the clicked button as btn btn-default active from btn btn-default and also change the unclicked button as btn btn-default during run time.
I also use i18n for mulitilingual purpose.
Use addClass() and removeClass() for this purpose
$(".btn-default").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
Demo
Looks like you are using bootstrap, so solve it using bootstrap way
<div class="btn-group" data-toggle="buttons">
<label id="btn-men" class="btn btn-default active">
<input type="radio" name="options" id="option1" checked /> Men
</label>
<label id="btn-women" class="btn btn-default">
<input type="radio" name="options" id="option2"/> Women
</label>
<label id="btn-kids" class="btn btn-default">
<input type="radio" name="options" id="option3"/> Kids
</label>
</div>
Demo: Fiddle
Look at the radio example under bootstrap buttons

Issue on Submitting a Form using jQuery

Can you please take a look at this Demo and let me know why I am not able to submit the Form (No Alert after clicking the Submit Button).
<div class="container">
<form id="target">
<div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
<label class="btn btn-default yesactive active ">
<input type="radio" name="options" id="option1"><span class="glyphicon glyphicon-ok" />
</label>
<label class="btn btn-default noactive">
<input type="radio" name="options" id="option2"><span class="glyphicon glyphicon-remove" />
</label>
</div>
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
</form>
</div>
<script>
$( "#target" ).on( "submit", function( e ) {
alert("Handler for");
e.preventDefault();
});
</script>
Change
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
To
<button type="submit" class="btn btn-default btn-sm" id="submit">Submit</button>
You are calling the event on "Submit", but in your button the type of the button is not submit. If you change to submit then it will cater for the submit event.
http://jsfiddle.net/s3774/13/
Try this one out. JQuery uses an input of type submit for form submissions.

Checked state for buttons Bootstrap

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/

Categories