如何使用jquery设置单选按钮选择的值

Posted 2023-02-22

【中文标题】如何使用jquery设置单选按钮选择的值

【英文标题】：How to set radio button selected value using jquery

【发布时间】：2013-10-18 02:36:53

【问题描述】：

如何在 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>

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

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

脚本块：

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

【问题讨论】：

能否分享生成的html而不是ASP代码

【参考方案1】：

试试

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

在 dom ready 上也调用方法

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

【讨论】：

@Sam 你能分享生成的 html... 收音机有名称属性吗

@Sam 你能分享生成的html而不是浏览器视图源的asp代码

谢谢..工作正常..但上面的脚本问题与一些浏览器..代码中的一些修改，例如：'$('input[name="' + name + '"][value ="' + SelectdValue + '"]').attr('checked', true);'

@Sam 如果您使用 jQuery > 1.6，请不要使用 .attr() 设置检查值，请参阅prop vs attr

@Arul prop 在 myside 不起作用。我只使用 jquery 1.3.6。我应该继续进行相同的操作吗？

【参考方案2】：

你可以做得更优雅。

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

【讨论】：

不错。此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]) ) 恢复所有值。

重要的是打电话给val([SelectedValue])，而不是val(SelectedValue)。第二个将 value 属性设置为所有输入的相同值。

那么这是寻找具有正确选择值的单选按钮并检查它吗？

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

【参考方案3】：

你也可以试试这个

function SetRadiobuttonValue(selectedValue)

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

【参考方案4】：

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

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

【参考方案5】：

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

谢谢老哥...

【参考方案6】：

如果选择更改，请务必先清除其他检查。唉……

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

【参考方案7】：

用于多个下拉菜单

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

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

【参考方案8】：

  <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

【参考方案9】：

  <asp:RadioButtonList ID="rblRequestType">
        <asp:ListItem Selected="True" Value="value1">Value1</asp:ListItem>
        <asp:ListItem Value="Value2">Value2</asp:ListItem>
  </asp:RadioButtonList>

你可以像这样设置检查。

var radio0 = $("#rblRequestType_0");
var radio1 = $("#rblRequestType_1");

radio0.checked = true;
radio1.checked = true;

【参考方案10】：

我发现一个干净的方法是为每个单选按钮提供一个ID，然后使用以下语句进行设置：

document.getElementById('publicedit').checked = true;

【参考方案11】：

这是唯一对我有用的语法

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

【参考方案12】：

可以使用元素的id来完成

例子

<label><input type="radio" name="travel_mode"  value="Flight" id="Flight"> Flight </label>
<label><input type="radio" name="travel_mode"  value="Train" id="Train"> Train </label>
<label><input type="radio" name="travel_mode"  value="Bus" id="Bus"> Bus </label>
<label><input type="radio" name="travel_mode"  value="Road" id="Road"> Other </label>

js:

$('#' + selected).prop('checked',true);

【参考方案13】：

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

其中TestToggleRadioButtonList 是RadioButtonList 的ID。