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.
Related
I got this script to work that is, to add class to the parent dropdown: others. However, on subsequent change of value in the dropdown, the class activated doesn't work anymore
JSFiddle Demo
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$(".dropdown-menu label").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.selection').html(selText+' <span class="caret"></span>');
$(this).parents('.btn-group').find('.dropdown-toggle').addClass('activated');
$(this).parents('.btn-group').find('label').click(function(){
$(this).parents('.btn-group').find('.dropdown-toggle').removeClass('activated');
});
});
Look at the demo and try changing the value in the dropdown. The activated class gets added the first time in the parent but as you keep changing the values, it doesn't work anymore. How do I go about fixing this?
Don't add a click event handler inside another one:
$(this).parents('.btn-group').find('label').click(function(){
In this way you create as many click handlers as many times you click on first element.
Another issue is in this line:
$(".dropdown-menu label").click(function(){
Change that line to:
$('#term label').on('click', function(e) {
Now you can listen for every label and so you can do what necessary:
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
.btn-group .dropdown-menu.show {
border: 2px solid blue;
padding: 0;
}
.btn-group .dropdown-menu .btn {
margin: 0;
border-radius: 0;
border: 0;
border-bottom: 2px solid blue;
}
.btn-group .dropdown-menu .btn input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.btn.btn-primary.w-100.dropdown-toggle.activated {
background-color: #0f3b83;
border: solid 2px #0f3b83;
color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span
class="selection">Other</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
</div>
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>
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>
I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/
Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
I'm trying to fill an array but jquery isn't finding the checked checkboxes
$('input[name="frequency"]:checked').map(function() {
frequencies.push($(this).val());
});
<div id="frequencyCheckboxes" class="btn-group" data-toggle="buttons" style="width:270px;">
<label class="btn btn-primary" for="cbm">
<input id="cbM" name="frequency" value="M" type="checkbox" autocomplete="off">M
</label>
<label class="btn btn-primary" for="cbW1">
<input id="cbW1" name="frequency" value="W1" type="checkbox" autocomplete="off">W1
</label>
<label class="btn btn-primary" for="cbW2">
<input id="cbW2" name="frequency" value="W2" type="checkbox" autocomplete="off">W2
</label>
<label class="btn btn-primary" for="cbW3">
<input id="cbW3" name="frequency" value="W3" type="checkbox" autocomplete="off">W3
</label>
<label class="btn btn-primary" for="cbW4">
<input id="cbW4" name="frequency" value="W4" type="checkbox" autocomplete="off">W4
</label>
<label class="btn btn-primary" for="cbW5">
<input id="cbW5" name="frequency" value="W5" type="checkbox" autocomplete="off">W5
</label>
</div>
Can you try below?
var frequencies = [];
$('input[name="frequency"]').click(function() {
frequencies.push($(this).val());
});
i think using each instead map should works
$(input[name="frequency"]).click(function(){
$('input[name="frequency"]:checked').each(function(i,el) {
frequencies.push($(el).val());
})
});