select checkbox by name and check if it checked javascript

Question

I am trying to test if checkbox is checked. I have more inputs and they have different names. I managed to select the input but I can't seem to check if it wa selected. If I add to the condition '= true' it is checked once I load the page. If I leave it just .checked it doesn't do anything

Have I selected the input right? Please note I want to select it by name rather than id or class
Why is it that once the page loads my condition for if statement doesn't work?

<input type="checkbox" name="name1">
<input type="checkbox" name="name2">
<input type="checkbox" name="name3">
<input type="checkbox" name="name4">


const firstInput = document.getElementsByName('name1');
if (firstInput[0].checked) {
    console.log('checked');
}

You are looking for an element with name "1" but you got element with a name "name1". — Todor Simeonov
– Todor Simeonov, Commented May 31, 2017 at 21:20
Oh yes sorry, I meant 'name1'. Once I checked it the console should print checked but it doesn't — Acdn
– Acdn, Commented May 31, 2017 at 21:27
Your code works. Where do you perform that check - in a function, in a listener? — Todor Simeonov
– Todor Simeonov, Commented May 31, 2017 at 21:42

shmiga · Accepted Answer · 2017-05-31 21:30:43Z

1

You are selecting element with name "1" but don`t have element with such name. If you want to select all inputs which name attribute starts with "name":

const firstInput = document.querySelectorAll('[name^=name]')

answered May 31, 2017 at 21:30

shmiga

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yvoytovych · Accepted Answer · 2017-05-31 22:08:59Z

0

You need to add attribute to that input. Attach an onclick listener and invoke

getAttribute setAttribute

to manipulate 'checked' attribute;

<input type="checkbox" onclick="myFunction()" name="name1">
<input type="checkbox" onclick="myFunction()" name="name2">
<input type="checkbox" onclick="myFunction()" name="name3">
<input type="checkbox" onclick="myFunction()" name="name4">


function myFunction() {
  var $element = document.getElementsByName('name1')[0];
  var checked = $element.getAttribute('checked') === 'true';
  $element.setAttribute('checked', !checked);
  console.log($element.getAttribute('checked'));
}

answered May 31, 2017 at 22:08

yvoytovych

8714 silver badges13 bronze badges

2 Comments

Acdn Over a year ago

Thank you for the suggestion.

Acdn Over a year ago

I managed to do it adding the event listener to the checkbox.

Collectives™ on Stack Overflow

select checkbox by name and check if it checked javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related