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

javascript jquery html radio-button

2022-08-29 23:51:23

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

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

答案 1

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

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

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

答案 2

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

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

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

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