Question

我有一个HTML页面。我想提取名称以“q1 _”开头的所有元素。

如何在JavaScript中实现这一目标？

Answer 1

快速简便的方法是使用jQuery并执行此操作：

var $eles = $(":input[name^='q1_']").css("color","yellow");

这将获取 name 属性以'q1_'开头的所有元素。要将生成的jQuery对象集合转换为DOM集合，请执行以下操作：

var DOMeles = $eles.get();

请参阅http://api.jquery.com/attribute-starts-with-selector/

在纯DOM中，您可以使用getElementsByTagName来获取所有输入元素，并遍历生成的数组。以{q1_'开头的name元素被推送到另一个数组：

var eles = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].name.indexOf('q1_') == 0) {
        eles.push(inputs[i]);
    }
}

Answer 2

您可以使用getElementsByName（“input”）来获取页面上所有输入的集合。然后遍历集合，检查路上的名称。像这样：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>

  <input name="q1_a" type="text" value="1A"/>
  <input name="q1_b" type="text" value="1B"/>
  <input name="q1_c" type="text" value="1C"/>
  <input name="q2_d" type="text" value="2D"/>

  <script type="text/javascript">
  var inputs = document.getElementsByTagName("input");
  for (x = 0 ; x < inputs.length ; x++){
    myname = inputs[x].getAttribute("name");
    if(myname.indexOf("q1_")==0){
      alert(myname);
      // do more stuff here
       }
    }
    </script>
</body>
</html>

Demo

Answer 3

HTML DOM querySelectorAll（）方法似乎很适合。

W3School链接here

语法（如W3School中所述）

document.querySelectorAll(CSS selectors)

所以答案。

document.querySelectorAll("[name^=q1_]")

Fiddle

编辑：

考虑FLX建议添加MDN here

的链接

Answer 4

您可以尝试将jQuery与Attribute Contains Prefix Selector一起使用。

$('[id|=q1_]')

虽然没有测试过。

Answer 5

使用纯Java脚本，这是一个工作代码示例

<input type="checkbox" name="fruit1" checked/>
<input type="checkbox" name="fruit2" checked />
<input type="checkbox" name="fruit3" checked />
<input type="checkbox" name="other1" checked />
<input type="checkbox" name="other2" checked />
<br>
<input type="button" name="check" value="count checked checkboxes name starts with fruit*" onClick="checkboxes();" />


<script>
function checkboxes()
{
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {       
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true && 
inputElems[i].name.indexOf('fruit') == 0) 
{
count++;

}

}
alert(count);
}
</script>

如何获取名称以某些字符串开头的所有元素？

5 个答案: