Множественный выбор значения флажка

Question

У меня возникли проблемы с получением моего var для приема более одного ввода.

Когда я выбираю один флажок, он показывает мне значение, однако, когда я выбираю больше, я получил ошибку undefined.

JavaScript

window.onload = function() { 
    var input= document.querySelectorAll('input#add2basket'); 
    var radio= document.querySelectorAll('input#hi'); 
    for (var j=0; j < 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('<pre>'+input.checked+'</pre>') 

return input.checked; 

}); 
return checked.length===1?checked[0]:null; 
} 

} 

HTML

<div> 
       <fieldset> 
        <legend class="Topping">Topping</legend> 

        <ul> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="1"> <label class= 
         "box">Double Cheese</label></li> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="2"> <label class= 
         "box">Peppers</label></li> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="3"> <label class= 
         "box">Pepperoni</label></li> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="4"> <label class= 
         "box">Olives</label></li> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="5"> <label class= 
         "box">Beef</label></li> 

         <li class="lastset"><input class="cbox" id="hi" name= 
         "top" type="checkbox" value="6"> <label class= 
         "box">Seafood</label></li> 
        </ul> 
       </fieldset> 
      </div><!-- end topping --> 
     </form> 

     <div id="actionbtn"> 
      <!--== action buttons==--> 
      <input class="apply" type="button" value= 
      "Back To Menu"> 
      <input class="apply" name="top" id="add2basket" id="actionbtn2" type="button" 
      value="Proceed"> 
     </div><!--==end of action buttons==--> 

При печати на input.checked, он показывает выбранные коробки, как верно, но где же я идти оттуда

решения JavaScript только пожалуйста.

Answer 1

Атрибут id должен быть уникальным для всего документа.

<li class="lastset"><input class="cbox" id="hi" name= 
        "top" type="checkbox" value="6"> <label class= 
        "box">Seafood</label></li> 

обновленный код:

<li class="lastset"><input class="cbox" id="hi_1" name= 
        "top" type="checkbox" value="6"> <label class= 
        "box">Seafood</label></li> 

(сделать это для каждого li и дать каждому li свой собственный идентификатор, если вам действительно нужно идентификатор в li теге

Чтобы получить все входы , используйте другой селектор, например class -трибут:

var css = 'input.cbox[name="'+name+'"]'; 
var radio= document.querySelectorAll('input.cbox'); 

Answer 2

Просто выберите флажки по имени класса (а не дублировать идентификаторы):

window.onload = function() { 
    var input = document.querySelectorAll('input#add2basket'); 
    var radio = document.querySelectorAll('input.cbox'); 

    for (var j = 0; j < radio.length; j++) { 
     radio[j].onchange = function() { 
      var input = findChecked(this.name); 
      return false; 
     }; 
    }; 

    function findChecked(name) { 
     var css = 'input.cbox:checked'; 
     var inputs = document.querySelectorAll(css); 
     return inputs; 
    } 
} 

Pluss можно упростить выбор селектора псевдо проверяются только с помощью :checked.

http://jsfiddle.net/BPFTp/1/