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

Question

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

我试过了，但是好像不行:

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 对象。