31

这是我的表单示例（只有我想要的输入，但还有很多其他输入）：

<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_%')？

注意：我没有使用任何库，也不打算使用任何库。

4

2 回答 2

49

您最好的选择可能是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 中，它是$$.

于 2013-04-08T08:42:35.070 回答
8

您可以在jQuery中使用带有选择器的开头

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

您可能还对包含选择器和结尾选择器感兴趣

使用querySelectorAll，你可以做

document.querySelectorAll('[name^="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”替换为“*”（注意，这可能会使您的代码变慢）

于 2013-04-08T08:39:00.627 回答