javascript - Bootstrap 3 单选按钮不返回值

Question

我正在努力使用 Twitter Bootstrap 3 单选按钮，我无法获取选中/选定元素的值。我是 Jquery 的新手，但我在这个网站上看到了很多如何处理单选按钮的帖子，但似乎没有一个可以与 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 

我尝试过:

onclick:Javascript:alert(this.value) 即使单击上面的任何元素也不会返回任何内容

var x = $("#FormFilters input[type='radio']:checked").val(); alert(x);不返回任何内容

var x = $('input[type=radio]:checked', '#Edu').val(); alert(x);

样式可能是问题吗？ <label>标签或类？

有人能告诉你如何正确地检查表单检查的输入/事件并获取值吗？谢谢

Answer 1

让我们暂时忘记所有的框架，回到基本的 Javascript。给定一些单选按钮，说:

<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

您可以使用普通 Javascript 输出单击的单选按钮的值:

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/

这段代码中有一些非常基本的概念。第一个是从 DOM 中选择元素，我使用 document.getElementsByTagName 来检索所有输入。第二个概念是循环。现在我已经选择了 DOM 中的所有输入，我需要迭代每个输入并附加一个 eventhandler。当特定 DOM 元素上触发某个事件时，将执行事件处理程序。在这种情况下，当任何单选按钮上触发 click 事件时，我会执行另一个函数。

此函数循环遍历单选按钮，并将所有选中的单选按钮的值存储在一个数组中，然后发出警报。