How to get all values of checked checkboxes in JavaScript/Node.js

Question

I have a set of checkboxes in an html form similar to this

<form action = "/submit" method = "POST">  
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple">
    <label for="val1"> Apple </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana">
    <label for="val2"> Banana </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear">
    <label for="val3"> Pear </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
    <label for="val4"> Grinadella </label>
  </div>
</form>

The form content is stored in a database. The storage works, however I can only get the value of the first checkbox and store it in the database. What I want to do is that if the user selects the first three checkboxes, I want to store the value Apple, Banana, Pear in the database separated by commas.

How can I do this. I know that in PHP there is a function called implode that does this, but how can I extend the form so that I get all values of checked checkboxes in JS/Node.js thanks in advance

Mamun · Accepted Answer · 2020-02-21 06:06:21Z

You can first select all the checked check boxes using querySelectorAll(':checked'). Then you can map() them to find the value. Finally join() them to get the string.

Demo:

function getAllChecked(){
 var checked = document.querySelectorAll(':checked');
 var res = Array.from(checked).map(c => c.value).join(', ');
 console.log(res);
 return false; // prevent the form submission
}

<form action = "/submit" method = "POST">
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple">
    <label for="val1"> Apple </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana">
    <label for="val2"> Banana </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear">
    <label for="val3"> Pear </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
    <label for="val4"> Grinadella </label>
  </div>
  <button onclick="return getAllChecked()">Show Checked</button>
</form>

Engineer S. Saad · Accepted Answer · 2020-02-21 05:59:13Z

0

You have to check the value of the check boxes

var checkBox = req.body.checkBox

if(checkBox ===true)
console.log('It is true')

I hope you get my point !!!

answered Feb 21, 2020 at 5:59

Engineer S. Saad

3845 silver badges20 bronze badges

Comments

palaѕн · Accepted Answer · 2020-02-21 06:00:28Z

You can try this using map() & join() methods:

var checkedBoxes = [...document.querySelectorAll('.styled:checked')]
var values = checkedBoxes.map(c => c.value).join(', ')
console.log(values)

<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple" checked>
  <label for="val1"> Apple </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana" checked>
  <label for="val2"> Banana </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear" checked>
  <label for="val3"> Pear </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
  <label for="val4"> Grinadella </label>
</div>

Tee_Dub · Accepted Answer · 2022-05-25 20:52:20Z

Give each checkbox input a different name, then access in your post request from req.body.

HTML:

<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
<input type="checkbox" class="styled" id="val1" name="value1" value="Apple" checked>
  <label for="val1"> Apple </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val2" name="value2" value="Banana" checked>
  <label for="val2"> Banana </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val3" name="value3" value="Pear" checked>
  <label for="val3"> Pear </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val4" name="value4" value="Grinadella">
  <label for="val4"> Grinadella </label>
</div>

POST request:

const {
value1,
value2,
value3,
value4
       } = req.body;

Log values:

console.log(value1);
console.log(value2);
console.log(value3);
console.log(value4);

Collectives™ on Stack Overflow

How to get all values of checked checkboxes in JavaScript/Node.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related