My goal is to run a function depending upon what radio button in a group is selected. Using other posts I was able to implement the bellow scripts. Here are the errors I am encountering:
1) The initial button that I declare to be checked by default does not call a function. If I remove the checked attribute from the button it functions as the others do.
2) Each button works only once. For example if I click button two, it fires the appropriate function. Then when button 3 is clicked, it too functions successfully. The problem is when I then try to go back to button 2. It will not fire a second time.
JQUERY
$("#btn-group-data :input").on("change",function () {
switch (this.value) {
case "radar":
console.log(this.value);
//do stuff...
break;
case "watches":
console.log(this.value);
//do stuff...
break;
case "warnings":
console.log(this.value);
//do stuff...
break;
case "temp":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
case "precip":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
case "snow":
console.log(this.value); // points to the clicked input button
//do stuff...
break;
}
});
BUTTON-HTML
<div id="map-container" class="container-fluid">
<div id="map-div">
<div id="btn-group-data" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar
</label>
<label class="btn btn-primary ">
<input type="radio" name="watches" value="watches" id="watches" autocomplete="off"> Watches
</label>
<label class="btn btn-primary">
<input type="radio" name="warnings" value="warnings" id="warnings" autocomplete="off"> Warnings
</label>
<label class="btn btn-primary">
<input type="radio" name="temp" value="temp" id="temp" autocomplete="off"> Temperature
</label>
<label class="btn btn-primary">
<input type="radio" name="precip" value="precip" id="precip" autocomplete="off"> Precipitation
</label>
<label class="btn btn-primary">
<input type="radio" name="snow" value="snow" id="snow" autocomplete="off"> Snow
</label>
</div>
</div>
</div>
You should give the same name to all your inputs like this
<div id="map-div">
<div id="btn-group-data" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="radar" value="radar" id="radar" autocomplete="off" checked="" > Radar
</label>
<label class="btn btn-primary ">
<input type="radio" name="radar" value="watches" id="watches" autocomplete="off"> Watches
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="warnings" id="warnings" autocomplete="off"> Warnings
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="temp" id="temp" autocomplete="off"> Temperature
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="precip" id="precip" autocomplete="off"> Precipitation
</label>
<label class="btn btn-primary">
<input type="radio" name="radar" value="snow" id="snow" autocomplete="off"> Snow
</label>
</div>
</div>
Related
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>
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>
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 have a group of checkboxes:
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
<label class="btn btn-info">
<input name="total" id="total" type="checkbox">Total
</label>
<label class="btn btn-info">
<input name="max" id="max" type="checkbox">Max
</label>
<label class="btn btn-info">
<input name="mean" id="mean" type="checkbox">Mean
</label>
<label class="btn btn-info">
<input name="min" id="min" type="checkbox">Min
</label>
<label class="btn btn-info">
<input name="extrapo" id="extrapolation" type="radio">Extrapo
</label>
</div>
</form>
I'm trying to call two functions depending on whether the button is checked or not and also change the text on the label.
My JS attempt:
<script type="text/javascript">
$('[name=all]').change(function () {
if ($(this).is(':checked')) {
hideAll();
document.getElementById("all").innerHTML = "Show";
}
else {
showAll();
document.getElementById("all").innerHTML = "Hide";
}
});
</script>
I can call each function no problem on check and unchecked, but when I change the innerHTML the check button stops working.
You are changing the value of innerHTML and leaving only text there.
Solution:
Put the text inside a span element
<label class="btn btn-info" id="all">
<input type="checkbox" name="all">
<span>Hide</span>
</label>
Then in JS do:
$('input[name="all"]').on('change', function() {
if ($(this).is(':checked')) {
hideAll();
$('#all span').text('Show');
} else {
showAll();
$('#all span').text('Hide');
}
});
Currently, you are selecting the label which selects this HTML element:
<label class="btn btn-info" id ="all">
<input name="all" type="checkbox" >Hide
</label>
When you set the innerHTML, you get rid of the input. I'd split up the label and input like this:
<input name="all" type="checkbox">
<label class="btn btn-info" id="all">Hide</label>
I have these buttons inside a form. How can I know which ones were selected when the user submits the form?
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<input type="submit value="submit"></input>
</form>
Your button group is a bootstrap style group and means nothing on the server side.
Your inputs will need to be named in order to produce a value from the form's postback.
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="check1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input name="check2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input name="check3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>