CODEWITHSUNDEEP
javascriptdom
Daniel White
Daniel White

Reputation: 37

Using JS DOM, I want to get all input tags with the same name

Hey guys I have this simple form and just need to know how to call for all the input tags with the name 'checks'.

<form>
    <ul>
        <li><input type="checkbox" name="checks"/> A</li>
        <li><input type="checkbox" name="checks"/> B</li>
        <li><input type="checkbox" name="checks"/> C</li>
        <li><input type="checkbox" name="checks"/> D</li>
    </ul>
</form>

so far the JS i have is:

function myFunc() {
    return document.getElementsByTagName('input').name;
}

Upvotes: 1

Views: 57

Answers (3)

cнŝdk
cнŝdk

Reputation: 32145

Use the Document.getElementsByName():

var inputs = document.getElementsByName("checks");

And you'll get a NodeList object containing all these inputs.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240938

You could use .querySelectorAll() and an attribute selector:

document.querySelectorAll('input[name="checks"]');

You could also use a .forEach loop to iterate over them:

var checkboxes = document.querySelectorAll('input[name="checks"]');

Array.prototype.forEach.call(checkboxes, function (el) {
    console.log(el.name);
});

Of course you could also use .getElementsByName():

document.getElementsByName('checks');

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92274

See:

console.log( document.querySelectorAll('input[name=checks]') )
<form>
    <ul>
        <li><input type="checkbox" name="checks"/> A</li>
        <li><input type="checkbox" name="checks"/> B</li>
        <li><input type="checkbox" name="checks"/> C</li>
        <li><input type="checkbox" name="checks"/> D</li>
    </ul>
</form>

Upvotes: 1

Related Questions