Javascript 多个选择复选框值

我很难让我的var接受多个输入

当我选择一个复选框时，它会显示值，但是，当我再选择时，我得到一个未定义的错误

JavaScript

HTML

当我打印input.checked时，它会将所选框显示为true，但我从哪里开始呢

请仅使用JavaScript解决方案。

整个文档中的属性id必须是唯一的

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

---

只需按类名选择复选框，不要重复id：

另外，您可以仅使用：checked伪选择器简化选中对象的选择

---

这方面没有真正的限制。大多数浏览器都会检索到找到的第一个id。@MichaelSazonov，这仍然是一个坏习惯。@Allendar当然！我只是想帮助作者改进他的答案。id属性必须是唯一的。即使它对第一个项目有效，这也只是一个应对事故的怪癖。请提供更多信息，说明它如何被认为是好的。嗨，伙计，谢谢你的快速回复，基本上，我的uni项目在3天内就要截止了，我正在创建一个比萨网站，我已经完成了比萨订单，我正在尝试做配料，我对js不是很好，但id不是问题，因为我没有使用它，我得到的值为真，用于检查多个框，但input.value只接受一个值，我认为。。。如果这有意义的话：Phi mate，我之所以使用u.filter是因为它返回一个值数组，因此我可以选中多个框，并通过向输入项添加额外属性来计算价格。我希望能够选中多个框，并得到它们的值来显示。再次感谢

   <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==-->

<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>

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

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;
    }
}