Getting multiple values from checked checkboxes Javascript

Question

I'm wondering if there would be away to get the values of checked checkboxes and than use the values in the filter function in my DeleteObject function.

<div style="text-align:center" class="list">
  <small>Walls:</small><input id="deleteCheckbox" type="checkbox" value="Wall">
  <small>Doors:</small><input id="deleteCheckbox" type="checkbox" value="Door">
  <small>Traps:</small><input id="deleteCheckbox" type="checkbox" value="SlowTrap"><br>
  <small>Mines:</small><input id="deleteCheckbox" type="checkbox" value="GoldMine">
</div>

Javascript:

function DeleteObject() {
  var b = Game.currentGame.ui.buildings;
  Object.keys(b).filter(function(e) {

    return CheckBoxValuesHere == b[e].type;

  }).forEach(function(i) {
    Game.currentGame.network.sendRpc({
      name: "DeleteObject",
      uid: b[i].uid
    })
  })
}

Having multiple elements with the same ID in a single document is invalid HTML. Consider fixing that first — CertainPerformance
– CertainPerformance, Commented Apr 29, 2019 at 2:35
Having multiple elements with the same ID is INVALID. You should use the name property instead. — some
– some, Commented Apr 29, 2019 at 2:36
cblist = getElementsByName('boxes-shared-name'); will get you the elements to loop through, once you change id= to name=. — Dave S
– Dave S, Commented Apr 29, 2019 at 2:40

random · Accepted Answer · 2019-04-29 02:47:36Z

1

As mentioned in the comments, id's should be unique. To get the values of checked checkboxes, add change event to the input with type checkbox and then grab input with checked checkboxes.

document.querySelectorAll('input[type="checkbox"]')
    .forEach(input => {
        input.addEventListener('change', function() {
            const values = [...document.querySelectorAll('input:checked')].map(input => input.value);
            console.log(values);
        });
    });

<div style="text-align:center" class="list">
    <small>Walls:</small><input id="deleteCheckbox" type="checkbox" value="Wall">
    <small>Doors:</small><input id="deleteCheckbox" type="checkbox" value="Door">
    <small>Traps:</small><input id="deleteCheckbox" type="checkbox" value="SlowTrap"><br>
    <small>Mines:</small><input id="deleteCheckbox" type="checkbox" value="GoldMine">
</div>

edited Apr 29, 2019 at 2:47

answered Apr 29, 2019 at 2:42

random

7,9093 gold badges21 silver badges25 bronze badges

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

Comments

some · Accepted Answer · 2019-04-29 02:59:34Z

0

function getItemsToDelete() {
  // get a nodeList of all selected elements,
  // convert it to an array and return an
  // array of the values.
  return Array.from(
    document.querySelectorAll(
      'input[name=deleteCheckbox]:checked'
    )
  ).map( item => item.value );
}
console.log(getItemsToDelete());

<ul style="list-style:none">
  <li><input name="deleteCheckbox" type="checkbox" value="Wall"><small>Walls</small></li>
  <li><input name="deleteCheckbox" type="checkbox" value="Door" checked><small>Doors</small></li>
  <li><input name="deleteCheckbox" type="checkbox" value="SlowTrap"><small>Traps</small></li>
  <li><input name="deleteCheckbox" type="checkbox" value="GoldMine"><small>Mines</small></li>
</ul>

edited Apr 29, 2019 at 2:59

answered Apr 29, 2019 at 2:42

some

49.8k14 gold badges83 silver badges96 bronze badges

Comments

Martin Spd · Accepted Answer · 2019-04-29 10:33:57Z

0

Add unique names or IDs to each checkbox and assign them listeners to click event (in JS code) or directly in HTML. Then in JS refer to checkbox value with document.getElementById(<ID>).value.

answered Apr 29, 2019 at 10:33

Martin Spd

531 silver badge4 bronze badges

Collectives™ on Stack Overflow

Getting multiple values from checked checkboxes Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related