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>
Related
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;
}
On click of one of blue buttons(only one can be selected at a time) it is selected. But when I click on Buy button the previous blue button gets unselected. Therefore, I cannot read the value of blue button by onclick of yellow button.
Fiddle here.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sign in Success</title>
</head>
<body>
<div class="btn-group" style="background:black;width:100%">
<button type="button" class="btn btn-default">Tr</button>
<div style="width:10px"></div>
<button type="button" class="btn btn-default">T</button>
<div style="width:10px"></div>
<button type="button" class="btn btn-default">Vt</button>
<div style="width:10px"></div>
<button type="button" class="btn btn-default">Rt</button>
</div>
<br> <br>
<h2 style="text-decoration:underline;" align="center">T</h2>
<div align="center"><!-- id="centerit" -->
<br> <br> <br>
<!-- <div style="width:50px"></div> -->
<button type="button" class="btn btn-primary cust" value="bu">Butter</button>
<button type="button" class="btn btn-primary cust" value="mi">Milk</button>
<button type="button" class="btn btn-primary cust" value="bi">Biscuit</button>
<br> <br>
<button type="button" class="btn btn-warning" value = "submit">Buy!</button>
</div>
</body>
</html>
I expect the blue button to remain selected when i click on buy button which is not happening now.
You can put your buttons in a form and replace the three blue buttons with radio buttons. See the documentation here:
https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons
Updated fiddle: https://jsfiddle.net/0wj1m8ce/
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
<label class="btn btn-primary cust">
<input type="radio" name="options" id="option1" autocomplete="off" value="bu"> Butter
</label>
<label class="btn btn-primary cust">
<input type="radio" name="options" id="option2" autocomplete="off" value="mi"> Milk
</label>
<label class="btn btn-primary cust">
<input type="radio" name="options" id="option3" autocomplete="off" value="bi" > Biscuit
</label>
</div>
Try adding radio buttons instead of buttons
That is what you required
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data-title="bu">Butter</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="mi">Milk</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="bi">Biscuit</a>
</div>
<script>
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>
<style>
#radioBtn .notActive{
color: #3276b1;
background-color: #fff;
}
</style>
Here is an updated JSFiddle
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
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
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.