问题陈述很简单。我需要看看用户是否从无线电组中选择了一个单选按钮。组中的每个单选按钮共享相同的id。

问题是我无法控制表单是如何生成的。下面是单选按钮控件代码的样例代码:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

除此之外,当单选按钮被选中时,它不会添加一个“checked”属性到控件中,只是文本检查(我猜只是没有值的属性检查)。下面是选定的无线电控件的外观

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

有人能帮助我用jQuery代码,可以帮助我得到选中单选按钮的值吗?


当前回答

我不是javascript的人,但我在这里找到了搜索这个问题。对于谁谷歌它和发现这里,我希望这有助于一些。所以,如果我们有一个单选按钮列表:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

我可以用这个选择器找到哪个选择了:

$('.list input[type="radio"]:checked:first').val();

即使没有选择任何元素,我仍然不会得到未定义的错误。因此,在获取元素的值之前,不需要编写额外的if语句。

下面是一个非常基本的jsfiddle示例。

其他回答

首先,不能有多个具有相同id的元素。我知道你说过你无法控制表单的创建方式,但是……尝试以某种方式从无线电中删除所有id,或使它们唯一。

要获得所选单选按钮的值,请使用:checked筛选器按名称选择它。

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDIT

所以你无法控制名字。在这种情况下,我会说把这些单选按钮都放在一个div中,命名为radioDiv,然后稍微修改你的选择器:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

确保将其包装在DOM就绪函数中($(function(){…});美元(文档)时的功能 (){...});).

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

另一种理解…工作:

HTML代码:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery代码:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

请参阅下面的工作示例,其中包含与不同部分相关联的无线电组集合。您的命名方案很重要,但理想情况下,您应该尝试对输入使用一致的命名方案(特别是当它们位于像这里这样的部分时)。

$('#submit').click(function(){ var section = $('input:radio[name="sec_num"]:checked').val(); var question = $('input:radio[name="qst_num"]:checked').val(); var selectedVal = checkVal(section, question); $('#show_val_div').text(selectedVal); $('#show_val_div').show(); }); function checkVal(section, question) { var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made"; return value; } * { margin: 0; } div { margin-bottom: 20px; padding: 10px; } h5, label { display: inline-block; } .small { font-size: 12px; } .hide { display: none; } #formDiv { padding: 10px; border: 1px solid black; } .center { display:block; margin: 0 auto; text-align:center; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="center"> <div> <h4>Section 1</h4> <h5>First question text</h5> <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label> <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label> <br/> <h5>Second question text</h5> <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label> <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label> <br/> <h5>Third Question</h5> <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label> <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label> </div> <div> <h4>Section 2</h4> <h5>First question text</h5> <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label> <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label> <br/> <h5>Second question text</h5> <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label> <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label> <br/> <h5>Third Question</h5> <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label> <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label> </div> <div> <h4>Section 3</h4> <h5>First question text</h5> <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label> <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label> <br/> <h5>Second question text</h5> <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label> <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label> <br/> <h5>Third Question</h5> <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label> <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label> </div> </div> <div id="formDiv" class="center"> <form target="#show_val_div" method="post"> <p>Choose Section Number</p> <label class="small"> <input type="radio" name="sec_num" value="1"> 1</label> <label class="small"> <input type="radio" name="sec_num" value="2"> 2</label> <label class="small"> <input type="radio" name="sec_num" value="3"> 3</label> <br/><br/> <p>Choose Question Number</p> <label class="small"> <input type="radio" name="qst_num" value="1"> 1</label> <label class="small"> <input type="radio" name="qst_num" value="2"> 2</label> <label class="small"> <input type="radio" name="qst_num" value="3"> 3</label> <br/><br/> <input id="submit" type="submit" value="Show Value"> </form> <br/> <p id="show_val_div"></p> </div> <br/><br/><br/>