0

var が複数の入力を受け入れるのに問題があります。

チェックボックスを 1 つ選択すると値が表示されますが、それ以上選択すると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 ソリューションのみでお願いします。

4

2 に答える 2

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、それぞれliに独自の ID を指定します。li

classすべての入力を取得するには、 -attributeなどの別のセレクターを使用します。

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