对于每个输入类型，使用javascript获取值

for each input type get value with javascript

本文关键字：javascript 获取 使用 于每个 输入 类型      更新时间：2023-09-26

我正试图从webshop框架生成的输入字段中获取输入类型值。我无法更改html。当我添加字段时，它会创建以下内容：

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

我找到了一些基于输入id获取值的代码，除了id的filter_。。。可以改变，每个商店都不同。

有什么建议吗？以下是我迄今为止收集到的信息。

<script type="text/javascript">
var filter;
function onload() {
    filter = document.getElementById('filter');
}
function show() {
    alert(filter.value);
}

您使用.getElementById是正确的，但您需要.getElementsByName。

var els = document.getElementsByName("filter[]");
for (var i = 0; i < els.length; i++)
  alert(els[i].value);
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

通过使用document.querySelectorAll，您可以使用任何CSS选择器，包括像input[id^="filter_"]这样的"attribute starts with"选择器，必须完成您的工作。

这是一个演示

var inputs = document.querySelectorAll('input[id^="filter_"]');
debugger;
for (i = 0; i < inputs.length; i++) {
    alert(inputs[i].value)
}
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

Jquery解决方案

$('input [id^="filter_"]').each(function(){
   alert( $(this).val() );
});

您可以通过标签名称获得输入，然后对其进行迭代。

    var inputs, index, len;
    inputs = document.getElementsByTagName('input');
    len = inputs.length;
    for (index = 0; index < len; ++index) {
        alert(inputs[index].value)
    }
相关文章：