title: Multiple selection checkbox values
body: <p>I'm having trouble getting my var to accept more than one input.</p>
  
  <p>When I select one checkbox, it shows me the value, however, when I select anymore I got an <code>undefined</code> error.</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>window.onload = function() {
    var input= document.querySelectorAll('input#add2basket');
     var radio= document.querySelectorAll('input#hi');
      for (var j=0; j &lt; radio.length; ++j){//loops over buttons
          radio[j].onclick = function (){// find radio button
  var input = findChecked(this.name);
  alert (input.value)
  return false;
  // determine pizza size
  //var size = input.value==='1'?‘Small':(input.value==='2'?'Regular':'Large');
  // determine pizza price
  //var price =Number(input.getAttribute('data‐price'));
  // add a ‘new’ pizza to the basket
  //addToBasket(newPizza(this.name,size, price));
  };
  };  
  
  function findChecked(name){
  var css = 'input#hi[name="'+name+'"]';
  var inputs = document.querySelectorAll(css);
  var checked = _.filter(inputs, function (input){
  document.write('&lt;pre&gt;'+input.checked+'&lt;/pre&gt;')
  
  return input.checked;
  
  });
  return checked.length===1?checked[0]:null;
  }
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div&gt;
                  &lt;fieldset&gt;
                      &lt;legend class="Topping"&gt;Topping&lt;/legend&gt;
  
                      &lt;ul&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="1"&gt; &lt;label class=
                          "box"&gt;Double Cheese&lt;/label&gt;&lt;/li&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="2"&gt; &lt;label class=
                          "box"&gt;Peppers&lt;/label&gt;&lt;/li&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="3"&gt; &lt;label class=
                          "box"&gt;Pepperoni&lt;/label&gt;&lt;/li&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="4"&gt; &lt;label class=
                          "box"&gt;Olives&lt;/label&gt;&lt;/li&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="5"&gt; &lt;label class=
                          "box"&gt;Beef&lt;/label&gt;&lt;/li&gt;
  
                          &lt;li class="lastset"&gt;&lt;input class="cbox" id="hi" name=
                          "top" type="checkbox" value="6"&gt; &lt;label class=
                          "box"&gt;Seafood&lt;/label&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;&lt;!-- end topping --&gt;
          &lt;/form&gt;
  
          &lt;div id="actionbtn"&gt;
              &lt;!--== action buttons==--&gt;
              &lt;input class="apply"  type="button" value=
              "Back To Menu"&gt; 
              &lt;input class="apply" name="top" id="add2basket" id="actionbtn2" type="button"
              value="Proceed"&gt;
          &lt;/div&gt;&lt;!--==end of action buttons==--&gt;
  </code></pre>
  
  <p>When I print the <code>input.checked</code>, it shows the selected boxes as true but where do i go from there</p>
  
  <p>JavaScript solutions only please.</p>