如何使用jQuery设置单选按钮的选中值

Question

如何在JavaScript中设置单选按钮的选中值：

HTML代码：

<input type="radio" name="RBLExperienceApplicable" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable" class="radio" value="0" >


<input type="radio" name="RBLExperienceApplicable2" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable2" class="radio" value="0" >

ASPX 代码

     <asp:RadioButtonList ID="RBLExperienceApplicable" runat="server" class="radio"    RepeatDirection="Horizontal" EnableViewState="false">
            <asp:ListItem Value="1" Text="Yes &nbsp;&nbsp;"></asp:ListItem> 
                <asp:ListItem Value="0" Text="No"></asp:ListItem>
        </asp:RadioButtonList>

     <asp:RadioButtonList ID="RBLExperienceApplicable2" runat="server" class="radio"  RepeatDirection="Horizontal" EnableViewState="false">
            <asp:ListItem Value="1" Text="Yes &nbsp;&nbsp;"></asp:ListItem> 
                <asp:ListItem Value="0" Text="No"></asp:ListItem>
        </asp:RadioButtonList>

// 从数据库获取一些代码
// 基于数据库的值执行脚本块

 <script type="text/javascript">
        RadionButtonSelectedValueSet('1');
 </script>

脚本块：

function RadionButtonSelectedValueSet(SelectdValue) {
    $('#RBLExperienceApplicable').val(SelectdValue);
        //$("input[name='RBLExperienceApplicable']:checked").val(SelectdValue);
}

- user2636638

---

你能共享生成的HTML而非ASP代码吗？ - Arun P Johny

Answer 1

试试看

function RadionButtonSelectedValueSet(name, SelectdValue) {
    $('input[name="' + name+ '"][value="' + SelectdValue + '"]').prop('checked', true);
}

在 DOM 就绪时也调用该方法。

<script type="text/javascript">
jQuery(function(){
    RadionButtonSelectedValueSet('RBLExperienceApplicable', '1');
})
</script>

- Arun P Johny

---

@Sam，你能分享生成的HTML吗？单选框有name属性吗？ - Arun P Johny

@Sam，你能分享浏览器查看源代码生成的HTML而不是ASP代码吗？ - Arun P Johny

谢谢。运行良好。但是上面的脚本在某些浏览器中存在问题。需要对代码进行一些修改，例如：'$('input[name="' + name + '"][value="' + SelectdValue + '"]').attr('checked', true);' - user2636638

@Sam，如果你使用的是jQuery > 1.6，请不要使用.attr()来设置选中的值，可以参考prop vs attr。 - Arun P Johny

@Arul 属性在我的代码中没有起作用。我仅使用了 jQuery 1.3.6 版本。我应该继续使用这个版本吗？ - user2636638

尝试了许多不符合我的需求的代码，只想说这正是我一直在寻找的精确代码！谢谢 @Arun P Johny - Harambe Attack Helicopter

Answer 2

你可以更优雅地完成。

function RadionButtonSelectedValueSet(name, SelectedValue) {
    $('input[name="' + name+ '"]').val([SelectedValue]);
}

- Shuhei Kagawa

---

不错。这个 val([...]) 语法也适用于其他输入，包括 <textarea> 和 <select>。比如我可以通过 var inputs = $("form :input:visible[type!=button]") 来获取所有可见的输入框，然后通过 var values = {}; inputs.serializeArray().map( function(x){values[x.name] = x.value} ) 获取它们的值，最后可以通过 inputs.map( function(){var value = values[this.name]; if(value) $(this).val([value])} ) 将其恢复。 - Arjan

重要的是要调用 val([SelectedValue])，而不是 val(SelectedValue)。第二个会将值属性设置为所有输入上的相同值。 - spekary

那么这是在查找传入的正确选定值的单选按钮并检查它吗？ - SolidSnake4444

对于那些想知道这是否适用于任何地方，或者只是一个技巧的人，这里有文档：http://api.jquery.com/val/#val-value，其中清楚地解释了使用数组将设置具有匹配值的适当元素为选定/已选中。因此，您也可以使用此方法选择多个复选框或多选选项。 - spikyjt

Answer 3

您也可以尝试这个。

function SetRadiobuttonValue(selectedValue)
{
  $(':radio[value="' + selectedValue + '"]').attr('checked', 'checked');
}

- Avinash Jha

Answer 4

以下脚本在所有浏览器中均正常工作：

function RadionButtonSelectedValueSet(name, SelectdValue) {
     $('input[name="' + name + '"][value="' + SelectdValue + '"]').attr('checked',true);
}

- user2636638

Answer 5

$('input[name="RBLExperienceApplicable"]').prop('checked',true);

感谢你，老兄...

- Nandakumar

Answer 6

如果选择发生变化，请确保首先清除其他选项。al la...

$('input[name="' + value.id + '"]').attr('checked', false);
$('input[name="' + value.id + '"][value="' + thing[value.prop] + '"]').attr('checked',  true);
               

- MrSethT

Answer 7

这是唯一对我起作用的语法

$('input[name="assReq"][value="' + obj["AssociationReq"] + '"]').prop('checked', 'checked');

- pat capozzi

Answer 8

document.getElementById("TestToggleRadioButtonList").rows[0].cells[0].childNodes[0].checked = true;

其中TestToggleRadioButtonList是RadioButtonList的ID。

- Andrei Bazanov

Answer 9

用于多个下拉菜单

$('[id^=RBLExperienceApplicable][value='+ SelectedVAlue +']').attr("checked","checked");

这里的 RBLExperienceApplicable 是单选按钮组输入标签 ID 的匹配部分。 而 [id^=RBLExperienceApplicable] 则匹配所有 ID 以 RBLExperienceApplicable 开头的单选按钮。

- th1rdey3

Answer 10

  <input type="radio" name="RBLExperienceApplicable" class="radio" value="1" checked > 
 //       For Example it is checked
 <input type="radio" name="RBLExperienceApplicable" class="radio" value="0" >


<input type="radio" name="RBLExperienceApplicable2" class="radio" value="1" > 
<input type="radio" name="RBLExperienceApplicable2" class="radio" value="0" >


      $( "input[type='radio']" ).change(function() //on change radio buttons
   {


    alert('Test');
   if($('input[name=RBLExperienceApplicable]:checked').val() != '') //Testing value
 {

$('input[name=RBLExperienceApplicable]:checked').val('Your value Without Quotes');

}
    });

http://jsfiddle.net/6d6FJ/1/ Demo

- Nandakumar