获取名称或ID的部分元素

Question

这是我的表单示例(只有我想要的输入,但还有很多其他输入):

<form name="inputform" action="..." method="post">
<input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0">
<input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00">
<input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1">

<!-- another TR -->

<input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0">
<input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00">
<input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1">
</form>

我想要的是获取输入值,但由于表单是用PHP构建的,我不知道行标识符(77,108).

有办法做某事getElementByName('id_qtedje_%')吗？

注意:我没有使用任何库,我不打算使用它.

Answer 1

你最好的选择可能是document.querySelectorAll,你可以使用任何CSS选择器,包括"属性开头"选择器之类的input[id^="id_qtedje_"].所有现代浏览器以及IE8都支持它:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]');

如果您只想要第一个匹配(而不是列表),则可以使用document.querySelector.它按文档顺序返回对第一个匹配的引用,或者null如果没有匹配则返回.

或者,你可以给元素一个类名,然后使用document.getElementsByClassName,但请注意虽然getElementsByClassName旧版本的Chrome和Firefox支持,但IE8没有它,所以它不如querySelectorAll现代更有用的支持时代.

var elements = document.getElementsByClassName("theClassName");

如果您使用任何库(jQuery,MooTools,Closure,Prototype等),它们可能会有一个函数,您可以使用它来查找任何CSS选择器的元素,用自己的代码填补浏览器支持的空白.例如,在jQuery中,它是$(jQuery)函数; 在MooTools和Prototype中,它是$$.

Answer 2

您可以在jQuery中使用starts with selector

var listOfElements = $('[name^="id_qtedje_"]')

您可能也对包含感兴趣并以选择器结束

使用querySelectorAll,你可以做到

document.querySelectorAll( '[名^ = "id_qtedje_"]')

或者:

假设所有元素都是inputs,您可以使用:

function getElementByNameStart(str){
var x=document.getElementsByTagName('input')
 for(var i=0;i<x.length;i++){
  if(x[i].indexOf(str)==0){
  return x[i];
 }
}
}

可以称为getElementByNameStart("id_qtedje_")

请注意,这只返回此类型的第一个元素.要全部归还:

function getElementByNameStart(str){
var x=document.getElementsByTagName('input')
var a=[];
for(var i=0;i<x.length;i++){
  if(x[i].indexOf(str)==0){
   a.push(x[i])
  }
}
return a;
}

如果元素是任何类型,请将"input"替换为"*"(注意,这可能会使您的代码变慢)