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

• javascript
• jquery
• twitter-bootstrap-3

5 Answers 5

Let'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