jQuery匹配多个属性

Posted 2023-03-05

技术标签:

【中文标题】jQuery匹配多个属性【英文标题】：jQuery match multiple attributes 【发布时间】：2010-09-14 10:24:51 【问题描述】：

我有以下标记，我想选中 All 单选按钮。

<ul>
    <li><input type="radio" value="All" name="Foo"/>All</li>
    <li><input type="radio" value="New" name="Foo"/>New</li>
    <li><input type="radio" value="Removed" name="Foo"/>Removed</li>
    <li><input type="radio" value="Updated" name="Foo"/>Updated</li>
</ul>

我想通过属性匹配，但我需要匹配两个属性，@name='Foo' 和 @value='All'。

类似这样的：

$("input[@name='Foo' @value='all']").attr('checked','checked');

有人可以说明如何做到这一点吗？

【问题讨论】：

参数的 XPath 语法（使用“@”）已在 jQuery 1.2.6 中弃用，并从 jQuery 1.3 中删除。 CSS 语法现在是唯一可用的语法（“[attribute=value]”） 【参考方案1】：

以下 html 文件显示了如何执行此操作：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
      $(document).ready(function()
        $("a").click(function(event)
          $("input[name='Foo'][value='All']").attr('checked','checked');
          event.preventDefault();
        );
      );
    </script>
  </head>
  <body>
    <ul>
      <li><input type="radio"  value="All"  name="Foo"  />All</li>
      <li><input type="radio"  value="New"  name="Foo"  />New</li>
      <li><input type="radio"  value="Removed"  name="Foo"  />Removed</li>
      <li><input type="radio"  value="Updated"  name="Foo"  />Updated</li>
    </ul>
    <a href="" >Click here</a>
  </body>
</html>

当您单击链接时，将选择所需的单选按钮。重要的一行是设置checked 属性。

【讨论】：

为什么使用attributeEndsWith 选择器(name$) 而不仅仅是attributeEquals？对于 OP - 请注意属性前面的 @ 已被弃用。 @MarkBrackett - 它是从我的一些类似代码中提取的，其中有许多类似名称的未编号列表组，我用一个语句完成了很多工作。我复制了代码，但没有编辑那部分，所以我现在要更改它 - 感谢您的提醒。【参考方案2】：

我在与此类似的墙上敲打我的头，只是想指出在 jQuery 1.3 中，接受的答案中使用的语法是唯一可行的语法。提问者使用 @ 语法来表示在 jQuery 中根本不起作用的表达式。希望这可以帮助下一个人通过 Google =p

遇到这个问题

要清楚，你必须使用

jQuery('input[name=field1][val=checked]')

而不是

jQuery('input[@name=field1][@val=checked]')

【讨论】：

谢谢 - @ 会绊倒像我这样粗心的 xpather。

以上是关于jQuery匹配多个属性的主要内容，如果未能解决你的问题，请参考以下文章

jquery属性选择器（同时匹配多个条件）