Question

我有一个比萨饼订购表格，其中包含浇头的复选框。每个新的Pizza都是一个放在数组中的对象。 pizza对象中的一个变量是toppings。我希望toppings变量包含所有复选框name属性的数组。我该怎么做？

我已尝试过，但似乎无效：

HTML：

<fieldset>
<form class="pure-form">
<legend>
<center><label><b>Name: &nbsp;</b></label>
<select class="nameSelection" name="nameSelectionPizza">
    <option value="0">Please Select:</option>
</select></center>
</legend>
<br>
<label><b>Pizza Type: &nbsp;</b></label>
<select class="pizza" name="firstMenu" disabled>
    <option data-price="0">Please Select:</option>
    <option name="margarita">Margarita</option>
    <option name="deep-pan">Deep Pan</option>
    <option name="stuffed-crust">Stuffed Crust</option>
</select>
    <span style="float:right">
    <label><b>Pizza Size: &nbsp;</b></label>
    <select class="pizzaSize" disabled>
        <option data-price="0">Please Select:</option>
        <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
        <option name="small" data-price="5.99">Small - £5.99</option>
        <option name="medium" data-price="6.99">Medium - £6.99</option>
        <option name="large" data-price="8.99">Large - £8.99</option>
        <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
        <option name="f-size" data-price="10.99">Family Size - £10.99</option>
    </select>
    </span>
</form>
</fieldset>
<fieldset style = "border-top:0px">
<form class="pure-form">
<legend><b>Toppings (99p Each): &nbsp;</b></legend>
<input type="checkbox" class="toppings" name="onions" disabled>Onions</input>
<input type="checkbox" class="toppings" name="mushrooms" disabled>Mushrooms</input>
<input type="checkbox" class="toppings" name="peppers" disabled>Peppers</input>
<input type="checkbox" class="toppings" name="olives" disabled>Olives</input>
<input type="checkbox" class="toppings" name="garlic" disabled> Garlic</input>
<input type="checkbox" class="toppings" name="peperoni" disabled>Peperoni</input>
<input type="checkbox" class="toppings" name="cheese" disabled>Pesto</input>
</form>
</fieldset>

JS：

var pizzaArray = new Array();

function pizza(number, pizzaCost, toppingCost, name, pizzaType, pizzaSize, toppings) {
    this.pizzaNumber = number;
    this.pizzaCost = pizzaCost;
    this.toppingCost = toppingCost;
    this.name = name;
    this.type = pizzaType;
    this.size = pizzaSize;
    this.toppings = toppings;
}

var pizzaCounter = 1;

pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00, "", "", "", ""));

$(document).on("change","input[type='checkbox']", function() {
    var topArray = $(":checkbox:checked").next('name').map(function(){
         return $(this).attr('name');
     }).get();
    var checked = $(this).parent().find(":checkbox:checked").length;
    var toppingCost = (0.99 * checked);
    var form = $(this).closest('div').attr("id");
    var formID = form.replace( /^\D+/g, '');
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            pizzaArray[i].toppingCost = toppingCost;
            pizzaArray[i].toppings = topArray;
            alert((pizzaArray[i].toppings).toString());
            calculateCost();
        }
    }
});

Answer 1

错误在于您使用next('name')。删除它，您的代码应该正常工作：

var topArray = $(".toppings:checked").map(function(){
    return this.name;
}).get();

请注意，如果您以后向页面添加更多复选框，我更改了选择器以使用复选框的类来保存任何问题。我还直接使用DOMElement中的name属性来保存创建一个不必要的jQuery对象。

将所有选中复选框的name属性放入数组 - JavaScript

1 个答案: