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时，它会将所选框显示为true，但我从哪里开始

只有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/

多个选择复选框值

2 个答案: