Bootstrap 3单选按钮没有返回值 [英] Bootstrap 3 radio buttons not returning value

问题描述

我正在努力使用Twitter Bootstrap 3单选按钮，我无法获得已选中/已选中元素的值。我是Jquery的新手，但我已经在这个网站上发了很多帖子，如何处理单选按钮，似乎没有一个可以使用Bootstrap。

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 

我试过了：

onclick：Javascript：alert（this.value）
甚至点击任何上面的元素不返回任何内容

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）; 不返回任何内容

var x = $（'input [type = radio]：选中'，'＃Edu'）。val（）; alert（x）;

样式可以成为问题吗？ < label> 标签或类？

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。给定一些单选按钮，例如：

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

您可以使用vanilla Javascript输出点击的单选按钮的值：

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小提琴： http://jsfiddle.net/LDEJ2/

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

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.

这篇关于Bootstrap 3单选按钮没有返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！