title: How to remove content from Javascript array when checkbox is unchecked
body: <p>I have a form that lets users select checkboxes. I am able to create an array that takes the textContent of the checkbox. It works whenever they are selected, however, I would like to have the text removed from the array whenever a box is unchecked. Currently, when a box is unchecked it adds the box that is unchecked to the array. I realize that is because anytime the on change function happens (i.e. checked/unchecked) my code will populate the array. I am just looking for something that will remove the string whenever it is unchecked. Any suggestions?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;section id="extra-features"&gt;
  
                      &lt;div class="span3"&gt;
                      &lt;label class="checkbox" for="Checkbox1"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Instagram
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Review site monitoring
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Google+
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; LinkedIn
                      &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="span3"&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Pinterest
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; FourSquare
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Tumblr
                      &lt;/label&gt;
                      &lt;label class="checkbox"&gt;
                          &lt;input type="checkbox" class="sum" value="50" data-toggle="checkbox"&gt; Advertising
                      &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code> var options = [];
   var inputs = document.getElementsByClassName('sum'),
  
  for (var i=0; i &lt; inputs.length; i++) {
      inputs[i].onchange = function() {
              if(this.checked){
          options.push(this.parentNode.textContent.trim());
             }
      }
  </code></pre>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/rynslmns/4dFGd/" rel="nofollow">http://jsfiddle.net/rynslmns/4dFGd/</a></p>