JavaScript check multiple checkbox

Question

        <input type="checkbox" name="name[]" value="A">A</input>
        <input type="checkbox" name="name[]" value="C">C</input>
        <input type="checkbox" name="name[]" value="D">D</input>
        <input type="checkbox" name="name[]" value="E">E</input>

I have value A and C, how to use javascript make A & C checked

You should have shown us what you've tried until now or you should just have checked the duplicates of that question: http://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript to find a possible solution of that specific situation. — briosheje, Jun 24 '15 at 17:14
Also, note that `` elements are void elements - that means that they don't have a closing tag. Use a `` to associate text with an input, and you can make your elements self-closing by adding a slash: ``. — Serlite, Jun 24 '15 at 17:22

score 3 · Accepted Answer · answered Jun 24 '15 at 17:22

This should work for you.

var myNodeList = document.querySelectorAll("input[value=A], input[value=C]");
for (i = 0; i < myNodeList.length; i++) {
    myNodeList[i].checked = true;
}

<input type="checkbox" name="name[]" value="A">A</input>
<input type="checkbox" name="name[]" value="C">C</input>
<input type="checkbox" name="name[]" value="D">D</input>
<input type="checkbox" name="name[]" value="E">E</input>

Kamil Kiełczewski · Answer 2 · 2021-09-10T15:51:00.497

Try

['A','C'].forEach(v=> document.querySelector(`[value=${v}]`).checked=1)

['A','C'].forEach(v=> document.querySelector(`[value=${v}]`).checked=1)

// and her is longer but theoretically more efficient version:
// document.querySelectorAll(['A','C'].map(v=> `[value=${v}]`)+'').forEach(c=>c.checked=1)

<input type="checkbox" name="name[]" value="A">A</input>
<input type="checkbox" name="name[]" value="C">C</input>
<input type="checkbox" name="name[]" value="D">D</input>
<input type="checkbox" name="name[]" value="E">E</input>

score 0 · Answer 3 · edited Jun 24 '15 at 20:18

0

You can use

document.querySelectorAll("input[value=A]")[0].checked = true;
document.querySelectorAll("input[value=C]")[0].checked = true;

edited Jun 24 '15 at 20:18

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

answered Jun 24 '15 at 17:10

taxicala

21,408
7
37
66

1

Note that `document.querySelectorAll()` returns an array of nodes, so you'd have to access them via index (eg. `result[0]`). That's probably the reason your answer wasn't accepted. – Serlite Jun 24 '15 at 17:27

score 0 · Answer 4 · answered Jun 24 '15 at 17:11

0

Why not just give the checkbox an id like:

   <input type="checkbox" name="name[]" value="A" id="checkA">A</input>

then use the following javascript:

document.getElementById("checkA").checked = true;

answered Jun 24 '15 at 17:11

CodeHunter

11
3

I cant give each checkbox an ID because I have may be ten checkboxes with same name[] – Jason Z Jun 24 '15 at 17:19

score 0 · Answer 5 · edited Jun 24 '15 at 17:57

You have to assign a id to the input box first then you can call javascript by using that id.

  <html>
    <script type="text/javascript">
    function setValue()
    {
       document.getElementById("A").checked = true;
       document.getElementById("C").checked = true;
    }
    </script>
    <body>
       <input id="A" type="checkbox" name="name[]" value="A">A</input>
       <input id="B" type="checkbox" name="name[]" value="C">C</input>
       <input id="C" type="checkbox" name="name[]" value="D">D</input>
       <input id="D" type="checkbox" name="name[]" value="E">E</input>
       <br/><br/>
       <button onClick="setValue()"> Set Value </button>
    </body>
  </html>

JavaScript check multiple checkbox

5 Answers5

Linked