【发布时间】：2018-08-02 20:41:12
【问题描述】：
我想获取选中的复选框的值，但我只能显示一个值。我正在使用 jQuery 来获取不同类型的值。我还可以获取单选按钮的值，但不能获取选中复选框的所有值。因此，假设用户选择 Pasta 和 Ceasar，我希望用户看到选择的沙拉：Pasta 和 Ceasar。我刚开始学习 JS，所以我不太确定该怎么做。
谢谢！
function summarizePackages() {
//get inside the div that's holding the buttons
var packages = $('.expander-content > .item');
var summary = '';
packages.each(function(index, pkg) {
pkg = $(pkg);
var name = $.trim(pkg.find('h3').text());
var entree = pkg.find('[name^="Entree Item"]:checked');
var salad = pkg.find('[name^="Salad Name"]:checked');
var delivery = pkg.find('[name^="Delivery Time"]:checked');
var hasOrder = pkg.find('input:checked').length > 0;
if (hasOrder) {
summary += 'Name of package: <b>' + name + '</b>';
summary += '<br>';
if (entree.length) {
summary += 'Entree selected: <b>' + entree.val() + '</b>' + '<br>';
}
if (salad.length) {
summary += 'Salads selected: <b>' + salad.val() + '</b>' + '<br>';
}
if (delivery.length) {
summary += 'Delivery selected: <b>' + delivery.val() + '</b>' + '<br>';
}
summary += '--------------------';
summary += '<br>';
}
});
return summary;
}
$('#reviewOrder input').on('change', function() {
var summary = summarizePackages();
$('#output').html(summary);
});
//make sure the user only selects two checkboxes
$(document).ready(function () {
$("input[class='onlyTwo']").change(function () {
var maxAllowed = 2;
var cnt = $("input[class='onlyTwo']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can only select ' + maxAllowed + ' salads!');
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="reviewOrder">
<fieldset>
<legend>Suite Packages</legend>
<h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
<div class="expander">
<a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
<div class="expander-content">
<div class="item">
<h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
<p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
<div class="entreesGroup">
<div>
<p>Entrée (Choose One)</p>
<input type="radio" name="Entree Item 1" value="Mustang Hot Dog"> Mustang Hot Dog<br>
<input type="radio" name="Entree Item 1" value="Nacho Station"> Nacho Station<br>
</div>
<div>
<p>Salads (Choose Two)</p>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Ceasar"> Ceasar<br>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Pasta"> Pasta <br>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>
</div>
<div>
<p>Choose Delivery Time</p>
<input type="radio" name="Delivery Time 1" value="Pre Game">Pre Game<br>
<input type="radio" name="Delivery Time 1" value="Kick Off">Kick Off<br>
<input type="radio" name="Delivery Time 1" value="Half Time">Half Time<br>
</div>
</div>
<p>How many?</p>
<input type="text" name="FIRST DOWN PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIRST+DOWN+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />
<p class="price-per-pallet"><small>* Price per guest: <span> 15.50</span></small></p>
<div class="row-total">
<input type="text" class="row-total-input" id="FIRST+DOWN+PACKAGE-mvp-row-total" disabled="disabled">
</div>
</div>
<div class="item">
<div>
<h3 class="product-title">FIELD GOAL PACKAGE<small> $20.00ea</small></h3>
<p>Peanuts, pretzels and snack mix. Your choice of Tri-Tip Sandwiches served with creamy horseradish, salsa, BBQ sauce and rolls or the Chili Bar served with red onions, cheddar cheese, sour cream, onion straws and cornbread pieces. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad.</p>
</div>
<div class="input_grouping_wrap">
<div>
<p>Entrée (Choose One)</p>
<input type="radio" name="Entree Item 2" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches<br>
<input type="radio" name="Entree Item 2" value="Nacho Station"> Chili Bar<br>
</div>
<div>
<p>Salads (Choose Two)</p>
<input type="checkbox" name="Salad Name 2" value="Pasta"> Pasta<br>
<input type="checkbox" name="Salad Name 2" value="Ceasar"> Ceasar<br>
<input type="checkbox" name="Salad Name 2" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>
</div>
<div class="delivery-time">
<p>Choose Delivery Time</p>
<input type="radio" name="Delivery Time 2" value="Pre Game">Pre Game<br>
<input type="radio" name="Delivery Time 2" value="Kick Off">Kick Off<br>
<input type="radio" name="Delivery Time 2" value="Half Time">Half Time<br>
</div>
</div>
<div>
<p>How many?</p>
<input type="text" name="FIELD GOAL PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIELD+GOAL+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />
<p class="price-per-pallet"><small>* Price per guest: <span> 20.00</span></small></p>
</div>
<div class="row-total">
<input type="text" class="row-total-input" id="FIELD+GOAL+PACKAGE-mvp-row-total" disabled="disabled">
</div>
</div>
</div>
</div>
</fieldset>
</form>
<div id="output"></div>
</body>
</html>【问题讨论】：
-
不是答案，但有几件事突然出现在我的眼前：a)
input[class='onlyTwo']可以写成input.onlyTwo甚至.onlyTwo，因为您似乎没有任何其他元素与那个班级； b) 由于checked是一个布尔属性，最好使用.prop("checked", false)； c) 您可能希望使用类而不是部分匹配属性值。 -
我看到了那个帖子，但我不知道如何在我的代码中实现它。
-
看看你在哪里有
var salad = pkg.find('[name^="Salad Name"]:checked');？这实际上会选择多个元素。所以也许将其重命名为salads:)。然后你可以得到一个值数组（副本中有答案显示如何）。然后，要将它们作为逗号分隔的列表，只需使用join(', ')，如Easy way to turn JavaScript array into comma-separated list?中所示 -
异端猴子，我该怎么做？我只是盯着学习 JS，所以我不知道该怎么做。谢谢！
标签： javascript jquery