我想获取选中的复选框的值，但只能显示一个值。我正在使用jQuery获取不同类型的值。我还可以获取单选按钮的值，但不能获取所有已选中复选框的值。假设用户选择了Pasta and Ceasar，我希望用户看到选择的Salads：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>
答案 0 :(得分：1)
我解决了您的问题中提到的问题。我添加了一个for循环来遍历salad中的所有项目，而实际上这是一个数组。当您有很多选择时，这将很有帮助。
您可能需要修复一个错误：如果您选择所有三种沙拉，则会出现仅两份沙拉的消息，但是所有三种沙拉都会显示在#output中。唯一的原因可能是summarizePackages()函数先运行，而我试图对其进行修复，但没有成功。
无论如何，这是代码：
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');
console.log(salad.length);
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>'
for (var i = 0;i < salad.length;i++) {
if (salad.length > 1 && i === 0) {
summary += salad[i].value + " and ";
} else {
summary += salad[i].value + " ";
}
}
summary += '</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).removeAttr("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>