Bootstrap 3单选按钮不返回值答案

【问题标题】：Bootstrap 3 radio buttons not returning valueBootstrap 3单选按钮不返回值
【发布时间】：2015-08-24 22:24:24
【问题描述】：

我正在努力使用 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> 标签或类？

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3

【解决方案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

您可以使用 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 元素上触发某些事件时，将执行事件处理程序。在这种情况下，当在任何单选按钮上触发 click 事件时，我会执行另一个函数。

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

【讨论】：

嗨，凯文，感谢您发布获得价值的正确方法。我将使用这种方法，但是，这并不能解决问题，因为我现在很确定问题出在样式上，我觉得这很奇怪，我删除了样式表，并且您的上述方法有效，然后再次使用 bootstrap css，它没有
@user3003977 这很有趣，我想知道 CSS 是否正在为您隐藏/替换收音机。
@user3003977 标记中的 cmets aka // 它们在实际标记中吗？
这就是我的想法......非常感谢凯文的解释
@user3003977 这是一个演示我的代码 + 你的标记 + 引导 css 的小提琴：jsfiddle.net/LDEJ2/1

【解决方案2】：

试试这个

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

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

【讨论】：

这是在 bootstrap 中使用 label 标签形成 css 单选组时最简单的方法。谢谢！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您尝试过 getElementById 吗？这就是我使用 fir js 的原因，因为大多数时候我都在使用 php GET

【讨论】：

【解决方案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

【讨论】：