Bootstrap 3 radio buttons not returning value

Question

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 come 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

Answer 1

Try this

$("input:radio").change(function(){
   alert($(this).val());
});

Fiddle: http://jsfiddle.net/jPNTC/

Answer 2

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.net/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.

Answer 3

似乎在使用引导程序3时，输入​​元素的检查状态没有更改。这对我有用，找到了嵌入在活动标签中的input元素。

$('label.active > input', '#Edu').val();

Answer 4

did you tried getElementById? This is what i'm using fir js because most of the times i'm working with php GET

Answer 5

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.net/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.net/7Z6uZ/1/

Maybe there is a bug .. see here: Bootstrap: Radio button value is not submitted if checked twice