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>
Related
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>
This question already has answers here:
change type of input field with jQuery
(29 answers)
Closed 6 years ago.
HTML
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>
jQuery function:
$(document).on("click", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "text");
});
$(document).on("blur", "#bkash-radio", function() {
console.log('test');
$("#trx_id").attr("type", "hidden");
});
I am trying to show the the textbox id=trx_id when the second radio option is selected, but when it is deselected I want the text box to be hidden. How can I do this?
Target your [name='payment_options'] radios
On change event see if this.value==="2"
Than manipulate the prop type respectively
$(document).on("change", "[name='payment_options']", function() {
$("#trx_id").prop("type", this.value==="2" ? "text" : "hidden");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="payment_options" value=1 autocomplete="off" checked>Cash on Delivery
</label>
<label class="btn btn-default" id="bkash-radio">
<input type="radio" name="payment_options" value=2 autocomplete="off">bKash
</label>
</div>
<input type="hidden" name="trx_id" id="trx_id" class="form-control" placeholder="Enter Transaction ID"/>
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>
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());
})
});
This question already has answers here:
In jQuery, how do I select an element by its name attribute?
(18 answers)
Closed 7 years ago.
How do I get the radio button that is checked from inside my div
Here is my jquery but c is returning undefined
$('#SpaceType').change(function () {
var kids = $(this).children();
$(kids).each(function() {
var c = $(this).data('id');
});
});
Here is my div
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
Use the :checked selector
$('#SpaceType').change(function () {
var c = $(this).find(':checked').attr('id');
alert(c)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.