0

我无法让我的 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 解决方案。

4

2 回答 2

0

只需按类名选择复选框（并且不要重复 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;
    }
}

:checked另外，您可以仅使用伪选择器简化选中的选择。

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

于 2013-04-22T08:14:33.327 回答
0

该属性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>

（如果您真的需要标签中的 id，请为每个人执行此操作并给li每个人自己的 IDlili

要获取所有输入，请使用不同的选择器，例如class-attribute：

var css = 'input.cbox[name="'+name+'"]';
var radio= document.querySelectorAll('input.cbox');
于 2013-04-22T07:39:28.920 回答