Create array with checked boxes with javascript

Question

i want to create a combination game checkin some elements with checkboxes

i need to create a array while the user check a checkbox and compare with the correct array

i dont know who do that

this is my inputs

<section class="draggable-items">
    <div class="check-tool">
        <input type="checkbox"  class="checkbox-tool" name="tool" id="SBD710" value="SBD710">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SBD710.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SCS220" value="SCS220">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SCS220.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SB201" value="SB201">
        <img  class="draggable correct" draggable="true" src="img-game/WOOD/SB201.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id="SB204" value="SB204">
        <img class="draggable correct" draggable="true" src="img-game/WOOD/SB204.png">
    </div>
    <div class="check-tool">
        <input type="checkbox" class="checkbox-tool" name="tool"  id=SBG700" value="SBG700">
        <img  class="draggable correct" draggable="true" src="img-game/WOOD/SBG700.png">
    </div>


</section>
    <button id="check" class="btn">Construye</button>

if somebody can explain me how to create that array with push method and who make the comparison with the correct combination array

Do you want to make an array of checked items or checked values, like [1, 0, 1] or [SBG700, null, null...]? — DreamBold, Nov 25 '22 at 18:03
You haven't really explained what that array is meant to do, and what values you're meant to be checking against? [Here's some documentation on arrays](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays) to get you started. — Andy, Nov 25 '22 at 18:09

DreamBold · Accepted Answer · 2022-11-25T19:29:28.237

0

Here's the demo for your solution

   

 let check = function () {
  let checkboxes = document.querySelectorAll("input[type=checkbox]");
  let result = [];
  for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
           result.push(checkboxes[i].value);
        } else {
           result.push('null');
        }
  }

  console.log(result);
};

<input type="checkbox" value="SBG701" onChange="check()" />
<input type="checkbox" value="SBG702" onChange="check()" />
<input type="checkbox" value="SBG703" onChange="check()" />
<input type="checkbox" value="SBG704" onChange="check()" />

edited Nov 25 '22 at 19:29

answered Nov 25 '22 at 18:56

DreamBold

2,727
1
9
24

1

what i need to change if a want the array look like this [SBG700, null, null...] – Santiago Diaz Nov 25 '22 at 19:19
If my correct combinantion is this array let correctAnswer = ['SBD710', 'SCS220', 'SB201', 'SB204', null, 'SB202', 'SBC550', 'SCJ600', 'SC200', null] i can make the comparation is result == correctAnswer. i am just a beginner on this – Santiago Diaz Nov 25 '22 at 19:36
`JSON.stringify(result) === JSON.stringify(correctAnswer);` will work for most situations @SantiagoDiaz – DreamBold Nov 25 '22 at 19:42

Create array with checked boxes with javascript

1 Answers1