无法通过jquery获取无线电组值

时间:2014-08-09 19:23:26

标签: javascript jquery html ajax

我有一个收音机组,其中包含2个单选按钮。在Ajax响应后创建此广播组。我想获得已检查的单选按钮的值,但我无法执行此操作。这是我的实施,任何帮助都会得到满足。

HTML:

Yes<input class='radioInput' id='g1Positive' type='radio' name='g1' value='YES'/>
No<input class='radioInput' id='g1Negative' type='radio' name='g1' value='NO'/>

JS:

$('#resultTable').on("click", ".editForm2", function(){
   var isIengStuWork = $('input:radio[name=g1]:checked').val();
});

2 个答案:

答案 0 :(得分:0)

希望这个简单的Fiddle就是答案

由于你没有发布html我只是在点击按钮时在div中显示值

HTML

<input [value][2]="first" type="radio" name="foo">First
<input value="second" type="radio" name="foo">Second
<input value="third" type="radio" name="foo">Third

<button id="show">Show</button>
<div id="result"></div>

JS

$("#show").click(function() {
    var value = $('input[name=foo]:checked').val();
    $('#result').html(value);
});

更新

在您发表评论后,我想知道您是否具有ID“resultTable”的元素将是一个动态加载的单选按钮。在这种情况下,绑定不起作用。 你应该在DOM中引用一个已经存在的元素,一个静态元素可以说。虽然您仍然可以使用类“editForm2”动态加载元素 有关http://api.jquery.com/on/

的更多信息

这就是这样的

$('#staticParentElement').on('click', '#dynamicChildElement', function(){ //whatever });

我创建了这个updated Fiddle。在其中,我通过显示添加内容的按钮

来模仿向DOM添加元素的ajax

在第一种情况下,我只是将表中的内容添加到现有容器中,我将“show”按钮的click事件绑定到该容器

所以我们将单选按钮和show按钮添加到静态#staticTable

<div id="staticTable"></div> <br/>
<button id="addStatic">Add dynamic content into static Table</button><br/>

$("#addStatic").click(function() {
    $('#staticTable').append("Dynamic content into static table<br/>Yes<input class='radioInput' id='g1Positive' type='radio' name='g1' value='YES'/>No<input class='radioInput' id='g1Negative' type='radio' name='g1' value='NO'/><button class='show'>Show</button>");
});

然后我们就可以像这样绑定show button点击了

$("#staticTable").on('click', '.show', function() {
    var value = $(':radio[name=g1]:checked').val();
    $('#staticResult').html(value);
});

这有效

但是如果我们向DOM添加我们绑定的“容器”,它就行不通。例如,在小提琴中,我们在div中注入一个#dynamicTable

<div id="ContainerForDynamicTable"></div><br/>
<button id="addDynamic">Add dynamic Table</button><br/><br/>

$("#addDynamic").click(function() {
   $('#ContainerForDynamicTable').append("Dynamic table<br/><div id='dynamicTable'>Yes<input class='radioInput' id='g1Positive'type='radio' name='g1' value='YES'/>No<input class='radioInput' id='g1Negative' type='radio'name='g1' value='NO'/></div><button class='show'>Show</button>");
});

我们尝试绑定show按钮,单击选择#dynamicTable

$("#dynamicTable").on('click', '.show', function() {
    var value = $(':radio[name=g1]:checked').val();
    $('#dynamicResult').html(value);
});

这不起作用

请注意,为了制作最后一个,我们应该找到.show按钮的静态父级,在这种情况下,向上树中最接近的是#ContainerForDynamicTable(你甚至可以直到文档,尽管它会更昂贵稍后找到.show按钮)

答案 1 :(得分:-1)

试试这个:

$('#resultTable').on("click", ".editForm2", function(){
var checked_ele = $('input[type="radio"][name="g1"]:checked');
 $(checked_ele).each(function(){
   // do stuff here
 });
});