在jQuery中,如何通过其name属性选择元素?

2020/10/31 14:31 · jquery ·  · 0评论

我的网页上有3个单选按钮,如下所示:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

在jQuery中,当单击这三个按钮中的任何一个时,我想获取所选单选按钮的值。在jQuery中,我们有id(#)和class(。)选择器,但是如果我想按名称查找单选按钮,该怎么办,如下所示?

$("<radiobutton name attribute>").click(function(){});

请告诉我如何解决这个问题。

应该做到这一点,所有这些都在文档中,该文档具有与此类似的示例:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

我还应注意,您在该代码段中有多个相同的ID。这是无效的HTML。使用类将元素集而不是ID分组,因为它们应该是唯一的。

要确定选中了哪个单选按钮,请尝试以下操作:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

将捕获该组中所有单选按钮的事件,并且所选按钮的值将放置在val中。

更新:发布后,我认为上述Paolo的答案更好,因为它使用的DOM遍历更少。我让这个答案站起来,因为它显示了如何以跨浏览器兼容的方式获取所选元素。

$('input:radio[name=theme]:checked').val();

其他方式

$('input:radio[name=theme]').filter(":checked").val()

这对我来说很棒。例如,您有两个具有相同“名称”的单选按钮,而您只想获取选中的按钮的值。您可以尝试这个。

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

以下代码用于按名称获取选定的单选按钮值

jQuery("input:radio[name=theme]:checked").val();

谢谢阿德南

从jQuery的1.7.2升级到1.8.2后,我在研究错误时发现了这个问题。我添加我的答案是因为jQuery 1.8及更高版本中发生了更改,该更改现在更改了此问题的答案。

在jQuery 1.8中,它们已弃用伪选择器,如:radio,:checkbox和:text。

要做到以上,现在只需更换:radio[type=radio]

因此,现在您的答案将适用于jQuery 1.8及更高版本的所有版本:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

你可以阅读有关的1.8自述变化门票具体的这种变化,以及一个明白,为什么上:无线电选择页面下的附加信息部分。

对于不想包含库来做一些非常简单的事情的人:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

有关当前答案的性能概述,请点击此处

如果您想在点击事件之前知道默认选中的单选按钮的值,请尝试以下操作:

alert($(“ input:radio:checked”)。val());

如果页面上有多个无线电组,则可以使用过滤器功能,如下所示

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

这是小提琴网址

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

如果您想要一个真/假值,请使用以下命令:

  $("input:radio[name=theme]").is(":checked")

像这样的东西?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

当您单击任何单选按钮时,我相信它将最终被选中,因此将为选定的单选按钮调用此按钮。

如果您在同一页面上有多个单选按钮,则也可以尝试以下操作以获取单选按钮的值:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

干杯!

也可以使用CSS类定义单选按钮的范围,然后使用以下命令确定值

$('.radio_check:checked').val()

这对我有用。

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

jQuery:


    $(“。radioClass”)。each(function(){
        if($(this).is(':checked'))
        alert($(this).val());
    });

希望能帮助到你..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

您可能会注意到使用类选择器获取ASP.NET RadioButton控件的值始终为空,这就是原因。

您可以通过以下方式创建RadioButton控件ASP.NET

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

ASP.NET为您呈现以下HTMLRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

因为ASP.NET我们不想使用RadioButton控件名称或id,因为它们可以出于用户的任何原因而更改(容器名称,表单名称,用户控件名称等),如您在上面的代码中所见。

获取RadioButton使用jQuery的价值的唯一剩余可行方法是使用css类,如对此完全不相关的问题的答案中所述,如下所示

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
本文地址:http://jquery.askforanswer.com/zaijqueryzhongruhetongguoqinameshuxingxuanzeyuansu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!