title: Removing value from array according to index using splice()
body: <p>I have 4 checkboxes. I add values of them to an array on check. It looks like this.</p>
  
  <p>Here are the four checkboxes I have.</p>
  
  <pre><code>&lt;input type="checkbox" value="degree"&gt;
  &lt;input type="checkbox" value="pgd"&gt; 
  &lt;input type="checkbox" value="hnd"&gt; 
  &lt;input type="checkbox" value="advdip"&gt;
  </code></pre>
  
  <p>Once I check all four of them, the array becomes,</p>
  
  <pre><code>["degree", "pgd", "hnd", "advdip"]
  </code></pre>
  
  <p>When I uncheck a checkbox, I need to remove the value of it from the array according to its correct index number. I used <code>splice()</code> but it always removes the first index which is <code>degree</code>. I need to remove the value from the array according to its index number no matter which checkbox I unselect. Hope someone helps. Below is the code. Thanks in advance!</p>
  
  <pre><code>&lt;input type="checkbox" value="degree"&gt;
      &lt;input type="checkbox" value="pgd"&gt; 
      &lt;input type="checkbox" value="hnd"&gt; 
      &lt;input type="checkbox" value="advdip"&gt;
  
  &lt;script&gt;
  
          function getLevels() {
               // get reference to container div of checkboxes
              var con = document.getElementById('course-levels');
              // get reference to input elements in course-levels container
              var inp = document.getElementsByTagName('input');
  
              // create array to hold checkbox values
              var selectedValues = [];
  
              // collect each input value on click
              for (var i = 0; i &lt; inp.length; i++) {
                  // if input is checkbox
                  if (inp[i].type === 'checkbox') {
                      // on each checkbox click
                      inp[i].onclick = function() {
                          if ($(this).prop("checked") == true) {
  
                              selectedValues.push(this.value);
                              console.log(selectedValues);
                          }
                          else if ($(this).prop("checked") == false) {
                              // get index number
                              var index = $(this).index();
  
                              selectedValues.splice(index, 1);
                              console.log(selectedValues);
  
                          }
                      }
                  }
              }
  
  
          }
  
          getLevels();
  
      &lt;/script&gt;
  </code></pre>