für jeden Eingangstyp erhalten Wert mit Javascript

Question

Ich versuche, die Eingabe Typ Werte aus Eingabefelder, die von einem Webshop-Framework generiert wurden. Ich kann den HTML nicht ändern. Wenn ich Felder hinzugefügt schafft es das:

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

ich einen Code gefunden, die den Wert am Eingang ID basiert wird, mit der Ausnahme, dass die Filter id _... ändern können, und für jedes Geschäft sind unterschiedlich.

irgendwelche Vorschläge? Hier ist, was ich bisher gesammelt habe.

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

Answer 1

Sie waren auf dem richtigen Weg mit .getElementById, aber Sie wollen stattdessen .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">

Answer 2

können Sie Eingaben erhalten, indem Tag-Namen, dann über sie iterieren.

var inputs, index, len; 

    inputs = document.getElementsByTagName('input'); 
    len = inputs.length; 

    for (index = 0; index < len; ++index) { 
     alert(inputs[index].value) 
    } 

Answer 3

von document.querySelectorAll verwenden, in dem Sie alle CSS-Selektor mit, darunter ein "attribute starts with" Selektor wie input[id^="filter_"] Ihre Arbeit muss erledigen können. Hier

ist eine Demo

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

Answer 4

Heres die JQuery Lösung

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