How to get all elements which name starts with some string?

前端未结

关注

 5  1299

日久生厌

I have an HTML page. I would like to extract all elements whose name starts with \"q1_\".

How can I achieve this in JavaScript?

相关标签:

5条回答

野性不改

2020-12-08 14:10

You can use getElementsByName("input") to get a collection of all the inputs on the page. Then loop through the collection, checking the name on the way. Something like this:

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

0 讨论(0)

野的像风

2020-12-08 14:12

Using pure java-script, here is a working code example

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

0 讨论(0)

孤独总比滥情好

2020-12-08 14:18
A quick and easy way is to use jQuery and do this:
```
var $eles = $(":input[name^='q1_']").css("color","yellow");
```
That will grab all elements whose name attribute starts with 'q1_'. To convert the resulting collection of jQuery objects to a DOM collection, do this:
```
var DOMeles = $eles.get();
```
see http://api.jquery.com/attribute-starts-with-selector/

In pure DOM, you could use getElementsByTagName to grab all input elements, and loop through the resulting array. Elements with name starting with 'q1_' get pushed to another array:
```
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]);
    }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤城傲影

2020-12-08 14:22
HTML DOM querySelectorAll() method seems apt here.

W3School Link given here

Syntax (As given in W3School)
```
document.querySelectorAll(CSS selectors)
```
So the answer.
```
document.querySelectorAll("[name^=q1_]")
```
Fiddle

Edit:

Considering FLX's suggestion adding link to MDN here
0 讨论(0)
发布评论:

提交评论
- 加载中...
面向向阳花

2020-12-08 14:23
You can try using jQuery with the Attribute Contains Prefix Selector.
```
$('[id|=q1_]')
```
Haven't tested it though.
0 讨论(0)
发布评论:

提交评论
- 加载中...