个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想获取已选中的复选框的值，但只能显示一个值。我使用 jQuery 来获取不同类型的值。我还能够获取单选按钮的值，但无法获取选中复选框的所有值。假设用户选择意大利面和凯撒，我希望用户看到选择的沙拉:意大利面和凯撒。我刚刚开始学习 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>最佳答案
我解决了您问题中提到的问题。我添加了一个 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>关于javascript - 无法使用 jQuery 获取选定复选框的所有值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51661852/
25
4
0
我有十二个指向不同类别的链接。作为用户定位的一种方式，我想强调用户现在所在的类别( - 按钮)。 如何在 CSS 中实现这一点？我读到了 selected和 active ，但我还没能让它发挥作用。
我想通过单击按钮来获取选择框中的所有选项值(选定/未选定)。我怎样才能做到这一点？ 最佳答案 我认为这是使用 Traversing/map 的好机会方法: var valuesArray = $("#
我正在尝试构建一个计算器，其中包含两个数字的两个 TextView 字段。我弄清楚了如何使用“应用程序内”数字键盘输入顶部数字 Operand 1 [textView] 的数字(我知道使用 EditT
我有一个简单的 jQuery $("span.value")，它选择包含文本的节点。此文本保证为整数。如何计算所有选定节点文本的总和，并将总和放入另一个节点？ 3 4 5 ? 最佳答案 你可以这样做:
我从同一台服务器上托管的一堆数据库中备份了 mysql 数据库 db1。现在只需要备份具有访问 db1 权限的选定用户，以便我可以在 db1 还原之前将这些特权用户还原到我的新服务器。 最佳答案 St
我有一个 ListView 。我想添加一个动画，如果我选择一个列表项，它将被删除，并且该项目下方的其余项目将通过向上滑动动画向上移动。我已经通过获取其子位置使用线性布局完成了此操作，但我无法理解如何向
我不明白如何使用 Python 解析来自 Outlook 的突出显示(选定)邮件？ 我有这个代码，但它适用于上一封邮件。 import win32com.client outlook = win32c
在 Xcode 6 中，您现在可以为选项卡项目的选中和未选中状态设置图标。请参阅下图中的说明: 和 唯一的问题是 SELECTED 状态的图像不显示。它只是显示空白。还有其他人有这个问题吗？请看下面的
在我的数据模型中，我有一个实体组和另一个GroupMember实体。一个Group包含一个或多个GroupMembers，但一个GroupMember只能同时位于一个Group中。到目前为止没有问题，
Android Button 在不同状态(正常、按下、选中、禁用)之间移动时会更改其可绘制背景。背景切换是即时的。是否可以使其平滑(动画)？ 最佳答案 是的，这是可能的。您只需为按钮添加 addAni
我使用 emacs 来查看和编辑代码和其他文本文件。我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本。类似于我在记事本或写字板中可以执行的操作。就像我可以在缓冲区中标记一些文本并执行 C
如何根据状态(选定、禁用)设置自定义选择类？如何根据状态选择(选定、禁用)在自定义下拉列表中设置类？照做了，但什么也没发生。请看我的例子................................
我正在尝试检查下拉菜单中是否存在特定文本值，如果存在，我想将其属性设置为selected。 我成功编写了一个 if 语句来检查文本是否存在: var country = usr.location; i
对于我的应用程序，我想让用户能够在回收器 View 中调整 TextView 项目的文本大小(通过捏缩放或 SeekBar)。默认值应为系统设置中选择的文本大小。最小值应为系统设置中的“非常小”，最大
我正在尝试创建一个 ListBoxItem 模板，该模板在选择时将带有圆角边框。我得到了这个 xaml，它在选择时不起作用:
我正在寻找检索焦点元素的 HTML。查看 webdriver.io 文档，方法 .getActiveElement() 应该可以解决这个问题。但是，我的 IDE (WebStorm) 显示错误，指出它
我创建了一个圆，在我的 onDraw() 方法中围绕圆绘制了一条字符串和一条线(箭头)。 public class Circle extends Activity { public class
对于生产应用程序，我们希望在 Windows 窗体应用程序的 ElementHost 内显示 DatePicker，但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题，因
好的，我在此处和 Google 上的许多网站上搜索了此问题的结果，但找不到针对我的问题的确切解决方案。 我有一个 sql 提取姓名和办公室。所以事情是这样的: $sql = "SELECT m
选中单元格时如何改变灰色？ 最佳答案 当用户点击选中的行 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd
我是一名优秀的程序员,十分优秀！