CODEWITHSUNDEEP
javascriptarraysfor-loop
Lotus
Lotus

Reputation: 77

Getting Value of Multiple Selected Checkbox with Same Name in JavaScript

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>

Upvotes: 0

Views: 2292

Answers (2)

dippas
dippas

Reputation: 60573

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>

Upvotes: 2

rupy
rupy

Reputation: 49

you misspelled checkboxesvar your variable is checkboxesvar

Upvotes: 0

Related Questions