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

Answer 1

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 !!!

Answer 2

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>

Answer 3

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>

Answer 4

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);