Im struggling with Twitter Bootstrap 3 radio buttons, I am not able to get the value of checked/selected elements. I new to Jquery, but I have e accross many posts on this site how to handle radio buttons and none seems to work with Bootstrap.
HTML
<form id="FormFilters" >
// First Group of Radio
<div id="Edu" class="btn-group" data-toggle="buttons">
<label class="btn btn-block btn-info-outline" >College <input id="Col" name="Edu" type="radio" value="Col" ></label>
<label class="btn btn-block btn-info-outline" >High School <input id="Sch" name="Edu" type="radio" value="School" ></label>
</div>
// Second Group
<div id="Experience" class="btn-group" data-toggle="buttons">
<label class="btn btn-block btn-info-outline" >Yes <input id="Yes" name="Exp" type="radio" value="Yes" ></label>
<label class="btn btn-block btn-info-outline" > No <input id="No" name="Exp" type="radio" value="No" ></label>
</div>
</form>
ect.../// up to 4 groups of radio btns
I tried :
onclick:Javascript:alert(this.value)
even clicking on any element above does not return anything
var x = $("#FormFilters input[type='radio']:checked").val();
alert(x);
Does not return anything
var x = $('input[type=radio]:checked', '#Edu').val(); alert(x);
Can the styling be the issue? the <label>
tags or class ?
Can someone tell how would you properly go through the form checked inputs / active and get the values ? thanks
Im struggling with Twitter Bootstrap 3 radio buttons, I am not able to get the value of checked/selected elements. I new to Jquery, but I have e accross many posts on this site how to handle radio buttons and none seems to work with Bootstrap.
HTML
<form id="FormFilters" >
// First Group of Radio
<div id="Edu" class="btn-group" data-toggle="buttons">
<label class="btn btn-block btn-info-outline" >College <input id="Col" name="Edu" type="radio" value="Col" ></label>
<label class="btn btn-block btn-info-outline" >High School <input id="Sch" name="Edu" type="radio" value="School" ></label>
</div>
// Second Group
<div id="Experience" class="btn-group" data-toggle="buttons">
<label class="btn btn-block btn-info-outline" >Yes <input id="Yes" name="Exp" type="radio" value="Yes" ></label>
<label class="btn btn-block btn-info-outline" > No <input id="No" name="Exp" type="radio" value="No" ></label>
</div>
</form>
ect.../// up to 4 groups of radio btns
I tried :
onclick:Javascript:alert(this.value)
even clicking on any element above does not return anything
var x = $("#FormFilters input[type='radio']:checked").val();
alert(x);
Does not return anything
var x = $('input[type=radio]:checked', '#Edu').val(); alert(x);
Can the styling be the issue? the <label>
tags or class ?
Can someone tell how would you properly go through the form checked inputs / active and get the values ? thanks
Share Improve this question asked Jan 28, 2014 at 10:45 AwenaAwena 1,0225 gold badges20 silver badges43 bronze badges5 Answers
Reset to default 2Let's forget all of the frameworks for a moment and get back to basic Javascript. Given some radio buttons, say:
<input type="radio" name="color" value="red"/> Red
<input type="radio" name="color" value="blue"/> Blue
<input type="radio" name="color" value="green"/> Green
<input type="radio" name="color" value ="white"/> White
<br/>
<input type="radio" name="shape" value="cirlce"/> Circle
<input type="radio" name="shape" value="square"/> Square
You could output the value of the clicked radio buttons using vanilla Javascript using:
var radios = document.getElementsByTagName("input");
//attach a function
for(var i = 0; i < radios.length; i++){
//only attach the function for type radio
if(radios[i].type == "radio"){
radios[i].onclick = function(){
alert(getCheckedValues());
}
}
}
function getCheckedValues(){
//muste be stored in an array
var values = [];
for(var x = 0; x < radios.length; x++){
if(radios[x].type == "radio" && radios[x].checked){
values.push(radios[x].value);
}
}
return values;
}
JS Fiddle: http://jsfiddle/LDEJ2/
There are some very basic concepts at work in this code. The first is selecting the elements from the DOM
, which I have done using document.getElementsByTagName
to retrieve all inputs. The second concept is looping. So now that I have selected all inputs from the DOM, I need to iterate over each one and attach an eventhandler
. The eventhandler is executed when some event is fired on the specific DOM
elements. In this case when the click
event is fired on any radio button, I execute another function.
This function loops through the radio buttons and stores the value of all checked radio buttons in an array, which is then alerted.
Try this
$("input:radio").change(function(){
alert($(this).val());
});
Fiddle: http://jsfiddle/jPNTC/
It seems that the checked state of the input element is not changed when using bootstrap 3. This works for me, finding the input
element that is embedded in the active label.
$('label.active > input', '#Edu').val();
did you tried getElementById? This is what i'm using fir js because most of the times i'm working with php GET
Use this:
$('input[name=Edu]:checked').val();
Or more precisely only for this form-id:
$('input[name=Edu]:checked', '#FormFilters').val();
I've added a button to your form and created a fiddle to test for you: http://jsfiddle/7Z6uZ/
You also might fetch all selected checkboxes at once:
$("input[type=radio]:checked").each(function()
{
console.log($(this).attr('name'), $(this).val());
// add $(this).val() with $(this).attr('name') to your array here
});
Try it here: http://jsfiddle/7Z6uZ/1/
Maybe there is a bug .. see here: Bootstrap: Radio button value is not submitted if checked twice