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

IT技术 javascript jquery html radio-button
2021-01-15 17:34:56

我的网页中有 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(){});

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

6个回答

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

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

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

从 jQuery 1.8 开始，jQuery 可以利用原生 DOM方法提供的性能提升[type='radio']来代替:radio这种方式querySelectorAll()。
2021-03-29 17:34:56
@PaoloBergantino 答案 100% 正确，因为它在单击所需的单选按钮后返回值。@Clayton Rabenda 的答案没有给出这个。
2021-03-29 17:34:56
@gargantaun - 如果你点击一个单选按钮，它会发生什么？
2021-04-03 17:34:56
好点子。虽然它仍然不是“如何在 jQuery 中使用其名称获取选定的单选按钮值？”。它是“如何在使用 jQuery 单击时获取选定的单选按钮值？”。一个小小的区别，但让我有点困惑。
2021-04-07 17:34:56
根据问题，这个答案是正确的。在全球范围内，我们寻求克莱顿的答案。
2021-04-08 17:34:56

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

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

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

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

从 jQuery 1.8 开始，jQuery 可以利用原生 DOM方法提供的性能提升[type='radio']来代替:radio这种方式querySelectorAll()。
2021-03-21 17:34:56
根据我阅读问题的方式，这是我需要的答案。:checked 是我在等式中缺少的内容。谢谢。
2021-03-27 17:34:56
对于那些不想从单击事件处理程序中获取值的人来说，这是一个有用的答案。否则，您必须使用:checked来查找哪个按钮被选中，例如，使用表单提交事件处理程序，其中this关键字不映射到单击的按钮。
2021-04-09 17:34:56
我在冒号之后和错误地“检查”之前给了一个空格。所以请确保没有空间。
2021-04-10 17:34:56 
$('input:radio[name=theme]:checked').val();
这是 IMO 的最佳答案，它说“用这个名字让我知道 CHECKED 收音机的value”。不需要事件等。
2021-03-27 17:34:56
我继续简单地$("input[name=theme]:checked").val();（将:radio部分省略，它似乎在 IE、FF、Safari 和 Chrome 中工作正常。我必须使用 jQ v 1.3 ......当然，这意味着只有一个名为“主题”的元素
2021-04-04 17:34:56

其他方式

$('input:radio[name=theme]').filter(":checked").val()
如果您有兴趣获取值 +1，则此方法很有用
2021-03-22 17:34:56
我喜欢这个解决方案。
2021-03-30 17:34:56
这是可靠的，因为您可以使用变量来保留单选按钮，例如$themeRadios = $('input:radio[name=theme'])设置任何事件处理程序，然后使用过滤器获取值，例如$themeRadios.filter(":checked").val()。
2021-04-05 17:34:56

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

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
该答案优于当前接受的 230 多个赞成答案的原因是因为该答案还考虑了用户何时通过键盘与单选按钮交互。
2021-04-09 17:34:56
其它你可能感兴趣的问题
上一篇$.when.apply($, someArray) 有什么作用？ 下一篇什么是“回调地狱”以及 RX 如何以及为什么解决它？