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

试试这个

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

小提琴： http://jsfiddle.net/jPNTC/

Answer 2

让我们暂时忘记所有框架并回到基本的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

您可以使用以下方法使用vanilla 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小提琴： http://jsfiddle.net/LDEJ2/

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

此功能循环显示单选按钮，并将所有已检查单选按钮的值存储在一个数组中，然后发出警告。

Answer 3

使用bootstrap 3时，似乎没有更改input元素的checked状态。这对我有用，找到嵌入在活动标签中的input元素。

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

Answer 4

你试过getElementById吗？这就是我使用fir js的原因，因为大部分时间我都在使用php GET

Answer 5

使用此：

$('input[name=Edu]:checked').val();

或者更准确地说，仅适用于此表单ID：

$('input[name=Edu]:checked', '#FormFilters').val();

我在表单中添加了一个按钮，并为您测试了一个小提琴： http://jsfiddle.net/7Z6uZ/

您也可以一次性获取所有选中的复选框：

$("input[type=radio]:checked").each(function() { console.log($(this).attr('name'), $(this).val()); // add $(this).val() with $(this).attr('name') to your array here });

在此处试试：http://jsfiddle.net/7Z6uZ/1/

也许有一个错误..请看这里： Bootstrap: Radio button value is not submitted if checked twice

Bootstrap 3单选按钮没有返回值

5 个答案: