Getting Value of Multiple Selected Checkbox with Same Name in JavaScript

Question

I can't seem to get the correct output. I am not sure if my for loop is the problem. Please excuse my variable names. I know I know, I made them very obvious. :) By the way, should I use var here or let is fine?

I have read somewhere that when declaring a variable:

var => function-scoped

ES6 (ES2015): let, const => block-scoped

The check all button won't work as well.

Your input will be highly appreciated.

<html>
 <head>
  <title>Get Checkbox Value</title>
  <style type="text/css">
      body {
          padding-top: 10px;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          background-color: #ede5e5;
          height: 100vh;
      }
      div { 
          width: 50%;
          margin: auto;
          border: 1px solid lightgray;
          border-radius: 5px;
          -webkit-box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
          box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
          padding: 10px;
          padding-left: 20px;
          padding-bottom: 30px;
          background-color: white;
      }
      button {
          padding:5px;
          font-size: 16px;
          font-weight: bold;
      }
      label {
          font-size: 18px;
          font-weight: bold;
      }
      input [type=checkbox] {
          width: 20px;
          height: 20px;
      }

  </style>

 </head>
<body>
    <div style="">
      <h2>Select a Programming Language You Love</h2>
      <form id="frm-lang">
          
          <input type="checkbox" name="languages" value="JavaScript">
          <label>JavaScript</label><br/>

          <input type="checkbox" name="languages" value="PHP">
          <label>PHP</label><br/>

          <input type="checkbox" name="languages" value="Pyton">
          <label>Pyton</label><br/>

          <input type="checkbox" name="languages" value="C#">
          <label>C#</label><br/>

          <input type="checkbox" name="languages" value="C++">
          <label>C++</label><br/><br/>

          <button id="btnSubmit">Submit</button>
          <button id="btnCheckAll">Check All</button>


      </form>


    </div>
     <script>
         let formvar = document.getElementById('frm-lang');  
         let valuesvar = [];

         formvar.addEventListener('submit', function(e) {   
          e.preventDefault ();
          let checkboxesvar = document.getElementsByName('languages');
          for (let i = 0; i < checkboxesvar.length; i++) {  
              if (checkboxesvar[i].checked == true) {  
              
                  valuesvar.push(checkboxesvar[i].value);  
              }   
          }

           alert('The values(s): ' + valuesvar.toString());
         });   

         // for the check all button

         document.getElementById('btnCheckAll').onclick = function(e) {
             e.preventDefault();
             let checkboxesvar = document.getElementsByName('languages');
             for (let i=0; i < checkboxesvar.length; i++) {
                 checkbboxesvar[i].checked = true;
             }
         }


            
     </script>

</body>
</html>

dippas · Accepted Answer · 2022-06-20 10:53:32Z

In your submit listener, you are not clearing your array, so it will keep the values from the previous submission, you need to clear it, so move it to inside the listener

in your checkAll you had a typo, checbboxesvar with 2 b

I improved your code a bit, renamed variable names and left one line solutions.

const form = document.getElementById('frm-lang');
const checkboxes = document.getElementsByName('languages');
const checkAll = document.getElementById('btnCheckAll');
const clearAll = document.getElementById('btnClearAll');

form.addEventListener('submit', e => {
  e.preventDefault();
  let values = [];
  // for loop solution
  
  //for (let i = 0; i < checkboxes.length; i++) {
  //  if (checkboxes[i].checked) {
  //    values.push(checkboxes[i].value);
  //  }
  //}
  
  //one liner solution
  checkboxes.forEach(el => el.checked &&  values.push(el.value))
 
 console.log('The values(s): ' + values);
});

// for the check all button

checkAll.addEventListener('click', () => {
  // for loop solution

  //for (let i = 0; i < checkboxes.length; i++) {
  //  checkboxes[i].checked = true;
  //}

  //one liner solution
  checkboxes.forEach(el => el.checked = true)
})

clearAll.addEventListener('click', () => {
  // for loop solution

  //for (let i = 0; i < checkboxes.length; i++) {
  //  checkboxes[i].checked = false;
  //}

  //one liner solution
  checkboxes.forEach(el => el.checked = false)
})

body {
  padding-top: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #ede5e5;
  height: 100vh;
}

.container {
  width: 50%;
  margin: auto;
  border: 1px solid lightgray;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  padding: 10px 10px 30px 20px;
  background-color: white;
}

button {
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
}

label {
  font-size: 18px;
  font-weight: bold;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

<div class="container">
  <h2>Select a Programming Language You Love</h2>
  <form id="frm-lang">

    <input type="checkbox" name="languages" value="JavaScript">
    <label>JavaScript</label><br/>

    <input type="checkbox" name="languages" value="PHP">
    <label>PHP</label><br/>

    <input type="checkbox" name="languages" value="Pyton">
    <label>Pyton</label><br/>

    <input type="checkbox" name="languages" value="C#">
    <label>C#</label><br/>

    <input type="checkbox" name="languages" value="C++">
    <label>C++</label><br/><br/>

    <button id="btnSubmit">Submit</button>
    <button type="button" id="btnCheckAll">Check All</button>
    <button type="button" id="btnClearAll">Clear All</button>
  </form>
</div>

rupy · Accepted Answer · 2022-06-19 17:02:26Z

0

you misspelled checkboxesvar your variable is checkboxesvar

answered Jun 19, 2022 at 17:02

rupy

493 bronze badges

Collectives™ on Stack Overflow

Getting Value of Multiple Selected Checkbox with Same Name in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related