Develop Reference

Change radio on click with given background color

I am trying to change the Bootstrap v5 class of the buttons when they are clicked. They all have a same background-color constant (#cd6133). However when clicked i'd like then to have the following colors; and also radio button to be hidden and bootstrap button to be visible with provided colors
btn-default (#cd6133)
Entry (#05c46b)
Proffessional (#2c2c54)
Excutive (#227093)
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="change" id="entry" value="1" autocomplete="off">Entry
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="proffessional" value="2" autocomplete="off">Proffessional
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="excutive" value="3" autocomplete="off">Excutive
</label>
</div>
<script>
$("#cd6133").on("click", function() {
var classArr = ["#05c46b", "#2c2c54", "#227093"];
$("#cd6133").removeClass(classArr.toString().replace(/,/g," "));
var value = $(this).find("input[name='change']").val();
$(this).addClass(classArr[value - 1]);
});
</script>

Get Selected Radio Button WITHOUT a Submit button

I'm creating radio buttons and I'd like to be able to set the contents of results to the selected button. WITHOUT a submit button.
document.getElementById("results").innerHTML = NONE or A or B
I see a lot of posts on how to do this with a SUBMIT button but I want this to be automatically detected and have struggled to find a relating post. Any help appreciated!
<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="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" autocomplete="off">B
</label>
</div>
<div id="results"></div>

$( document ).ready(function() {
console.log( "ready!" );
$("input[name='test']").change(function(){
$("#results").text($("input[name='test']:checked").val());
});
});
<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>
<div id="results"></div>

Just set up click events for the buttons and populate the results area in the event callback. No JQuery or Bootstrap is required.
But, radio buttons need to have their value attribute configured so that clicking one has meaning over the others. Also, autocomplete is irrelevant with radio buttons.
// Get a reference to the result area element
let results = document.getElementById("results");
// Set up a click handler on the parent of the radio buttons so that
// any clicks to the descendants will bubble up to the parent
document.querySelector("div.btn-group").addEventListener("click", function(evt){
// Check if a radio button triggered the event
if(evt.target.type === "radio"){
// Populate the results area with the value of the clicked element
results.textContent = evt.target.value;
}
});
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" value="B">B
</label>
</div>
<div id="results"></div>

Here, I added a button so you can get the status when clicked. You should add a value attribute to your input fields.
$(document).ready(function(){
$(".detect").click(function(){
var radioValue = $("input[name='test']:checked").val();
if(radioValue){
$(".results").text(radioValue);
}
});
});
<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="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" value="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" value="B" autocomplete="off">B
</label>
</div>
<div class="results"></div>
<button class="detect">Detect</button>

If you want to use the jQuery, you can take advantage of the delegate method.
https://api.jquery.com/delegate/#delegate-selector-eventType-handler
Using the delegate, you'll set just one handler that will deal with the value change inside the radio button group. This way the event will be handled even if the value inside the radio buttons group will change "programmatically", that is as a result of another code running on your website as long as that code will dispatch the "change" event.
Remember to add the id on the radio buttons container and value attributes to the HTML structure (you will need the value attribute anyway on the server-side).
<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"/>
<script>
$(document).ready(function() {
$("#option").delegate("[type=radio]", "change", function(event) {
$("#results").text( $(event.target).val() );
});
});
</script>
<div id="option" class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="NONE" value="NONE" autocomplete="off">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="A" value="A" autocomplete="off">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="B" value="B" autocomplete="off">B
</label>
</div>
<div id="results"></div>

Add an on change listener to bootstrap 4 button group?

I have this (bootstrap 4) button group as follows:
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>
I want to add a JS onchange listener and find out which one was pressed (e.g. Second, Minute, or Hour). I don't want to add a listener to each button because there are a lot of buttons like these on my page.
I've tried adding something like this:
$('#timeselector').on("change", function() {
alert(this)
});
But that doesn't work. If I change "change" to "click", it does alert, but it doesn't give me which was selected.
Can someone help with this? Thank you!

You need to use click instead an to attach the event to the input's inside your div :
$('#timeselector input')
$('#timeselector input').on("click", function() {
alert(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div id="timeselector" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active ">
<input type="radio" name="options" id="sec" autocomplete="off" checked>Second
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="min" autocomplete="off">Minute
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="hr" autocomplete="off">Hour
</label>
</div>

Change color of a Radio button permanently on click

Hi I designed a serious of Radio buttons. I want to change the color of radio buttons permanently on click. Please help me to implement this design. I have written this code here, Which is not working. Any suggestions would be highly appreciated.
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

You can use add and remove class with siblings like this.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
$(this).siblings().removeClass('active')
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

Try this code, Its working
$('.btn.btn-default').on("click", function() {
//$('button').not(this).removeClass();
$(this).addClass('active');
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>

I think you only need to change the toggleClass with addClass as you need to change color permanently.
$('.btn.btn-default').on("click", function() {
$(this).addClass('active');
});

In my case, the below solution worked the best. Thanks all for your valuable inputs.
<style>
.btn-default.active{background-color:blue;}
</style>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).addClass('active');
});
</script>
I added .btn-default CSS class to the style.

You just need to add JQuery after loading the whole body.
I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<style>
.active{background-color:red;}
</style>
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click",function(){
//$('button').not(this).removeClass();
$(this).toggleClass('active');
});
</script>
</body>
</html>

How to find out which label contains 'active' class

I've got 4 labels that act as radio buttons. When a label is active it will have the class active. I want to find out which label has the active class when one of the labels is clicked. I've tried hasClass(), but that is executed before the classes are changed. Can someone tell me how I can solve this problem? Should I create a seperate method for every label?
$("#elements").click(function() {
if ($("#eventelement").hasClass("active")) {
console.log("event activated")
}
if ($("#roleelement").hasClass("active")) {
console.log("role activated")
}
// [...]
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

You dont need a class to find active option. You can just use :checked selector.
Here is working example.
$("#elements label").click(function () {
var currentValue = $("input[name=type]:checked").val();
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
label {
color: blue;
}
label.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off"> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Code to check both previous-active-label and current-active-label
Working snippet:-
$(document).ready(function(){
$('#elements label').on('click',function(){
var prev = $('label.active').children('input[type="radio"]').val();
var current = $(this).children('input[type="radio"]').val();
$('#elements label').removeClass('active');
$(this).addClass('active');
alert("previous active label is "+prev);
alert("current active label is "+current);
});
});
.active{
color:green;
font-size:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Found a solution inadvertently, wrapping the label selection in setTimeout delays it just enough to return the proper one.
$("#elements").on("click", function() {
setTimeout(function() {
var l = $("#elements label.active");
console.log(l.get()[0].id);
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="elements" style="width:100%; padding-bottom: 20px">
<label class="btn btn-primary active" id="eventelement" style="width:25%">
<input type="radio" name="type" value="event" id="elementoption1" autocomplete="off" checked> Event
</label>
<label class="btn btn-primary" id="roleelement" style="width:25%">
<input type="radio" name="type" value="role" id="elementoption2" autocomplete="off"> Role
</label>
<label class="btn btn-primary" id="workelement" style="width:25%">
<input type="radio" name="type" value="workingarea" id="elementoption3" autocomplete="off"> Working Area
</label>
<label class="btn btn-primary" id="calendarelement" style="width:25%">
<input type="radio" name="type" value="calendar" id="elementoption4" autocomplete="off"> Calendar
</label>
</div>

Bind to radio input change and check which one is selected:
$("#elements input").on("change", function() {
var activeLabel = $("#elements input:checked").parent();
console.log(activeLabel.attr('id') + ' activated');
});
Please note, one can change the selection using keyboard as well, therefor click is not enough.
Also on JS Fiddle.