多選複選框值

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自己的ID，如果你真的需要在li標籤

的ID來獲得所有的輸入，使用不同的選擇器，如class-屬性：

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

Answer 2

個

類名只要選擇複選框（和不重複的id）：

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/