当前位置： 文江博客话题详情

在 jQuery 中，如何通过名称属性选择元素？

发布于 2024-07-23 15:39:36 字数 723 浏览 3 评论 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(){});

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

原文

I have 3 radio buttons in my web page, like below:

<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>

In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?

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

Please tell me how to solve this problem.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（18）

顾忌 2024-07-30 15:39:37

这对我有用..

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());
    });

希望它有帮助..

This worked for me..

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());
    });

Hope it helps..

回复 原文
泡沫很甜 2024-07-30 15:39:37
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
回复 原文
作妖 2024-07-30 15:39:37

您可能会注意到使用类选择器来获取 ASP.NET RadioButton 控件的值始终为空，原因如下。

您在 ASP.NET 中创建 RadioButton 控件，如下所示：

<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 为您的 RadioButton 呈现以下

<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>

HTML ASP.NET 我们不想使用 RadioButton 控件名称或 id，因为它们可能因用户无法控制的任何原因而发生更改（容器名称、表单名称、用户控件的更改）名称，...），正如您在上面的代码中看到的那样。

使用 jQuery 获取 RadioButton 值的唯一可行方法是使用 this< 中提到的 css 类/a> 回答一个完全不相关的问题如下

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});

You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.

You create RadioButton control in ASP.NET as below:

<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" />

And ASP.NET renders following HTML for your RadioButton

<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>

For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.

The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
回复 原文
巡山小妖精 2024-07-30 15:39:36

这应该可以做到，所有这些都在 文档 中，其中有一个非常相似的示例对此：

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

我还应该注意到该片段中有多个相同的 ID。 这是无效的 HTML。 使用类对元素集进行分组，而不是 ID，因为它们应该是唯一的。

This should do it, all of this is in the documentation, which has a very similar example to this:

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

I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

回复 原文
本王不退位尔等都是臣 2024-07-30 15:39:36

要确定选中哪个单选按钮，请尝试以下操作：

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

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

更新：发布后我认为 Paolo 的答案更好，因为它使用了更少的 DOM 遍历。 我让这个答案成立，因为它展示了如何以跨浏览器兼容的方式获取所选元素。

To determine which radio button is checked, try this:

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

The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.

Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.

回复 原文
青衫负雪 2024-07-30 15:39:36
$('input:radio[name=theme]:checked').val();

$('input:radio[name=theme]:checked').val();
回复 原文
风吹雪碎 2024-07-30 15:39:36

其他方式

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

another way

$('input:radio[name=theme]').filter(":checked").val()
回复 原文
枉心 2024-07-30 15:39:36

这对我来说非常有用。 例如，您有两个具有相同“名称”的单选按钮，并且您只想获取选中的单选按钮的值。 你可以试试这个。

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

This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
回复 原文
悲喜皆因你 2024-07-30 15:39:36

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

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

谢谢
阿德南

The following code is used to get the selected radio button value by name

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

Thanks
Adnan

回复 原文
错爱 2024-07-30 15:39:36

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

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

jsfiddle

有关性能概述当前答案在此处查看

For anyone who doesn't want to include a library to do something really simple:

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

jsfiddle

For a performance overview of the current answers check here

回复 原文
_蜘蛛 2024-07-30 15:39:36

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

在 jQuery 1.8 中，他们已弃用伪选择器例如：无线电、：复选框、：文本。

要执行上述操作，只需将 :radio 替换为 [type=radio] 即可。

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

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

您可以阅读有关 1.8 自述文件的更改和针对此更改的票证以及在“附加信息”部分下的 :radio 选择器页面 上了解原因。

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.

With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.

To do the above now just replace the :radio with [type=radio].

So your answer now becomes for all versions of jQuery 1.8 and above:

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

You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

回复 原文
呆 2024-07-30 15:39:36

如果您想在单击事件之前了解默认选定单选按钮的值，请尝试以下操作：

alert($("input:radio:checked").val());

If you'd like to know the value of the default selected radio button before a click event, try this:

alert($("input:radio:checked").val());
回复 原文
谎言 2024-07-30 15:39:36

如果页面上有多个单选组，则可以使用过滤功能，如下所示

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

这是小提琴网址

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

You can use filter function if you have more than one radio group on the page, as below

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

Here is fiddle url

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

回复 原文
梦里梦着梦中梦 2024-07-30 15:39:36
<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 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>
回复 原文
夜无邪 2024-07-30 15:39:36

如果您想要真/假值，请使用以下命令：

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

If you want a true/false value, use this:

  $("input:radio[name=theme]").is(":checked")
回复 原文
谜兔 2024-07-30 15:39:36

也许是这样的？

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

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

Something like this maybe?

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

When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.

回复 原文
总以为 2024-07-30 15:39:36

如果您在同一页面上有不止一组单选按钮，您也可以尝试此操作来获取单选按钮的值：

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

干杯！

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:

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

Cheers!

回复 原文
柳絮泡泡 2024-07-30 15:39:36

还可以使用 CSS 类来定义单选按钮的范围，然后使用以下内容来确定值

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

can also use a CSS class to define the range of radio buttons and then use the following to determine the value

$('.radio_check:checked').val()
回复 原文
~没有更多了~

关于作者

软甜啾

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

策马西风

文章 0 评论 0

柠檬心

文章 0 评论 0

1331

文章 0 评论 0

七度光

文章 0 评论 0

qq_oc2LaO

文章 0 评论 0

野却迷人

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文