如何删除重复的选定项目并替换为数量
How to remove duplicate selected items and replace with quantity
我一直在为学校做这个项目。这是K-J级的供货清单。每个年级都有2号铅笔和其他类似的物品。当你在幼儿园选择一个项目（#2支铅笔），并在五年级选择相同的项目时，然后生成列表，我不需要#2支铅笔出现两次，只需要一次，旁边有数量号。
我确信这与if语句有关，但我仍在努力掌握这些语句。
这是jquery移动部件
<body>
<section class="header_default footer_default" data-role="page" id="setup" data-title="Setup">
<article data-role="content">
<div class="loaded"></div>
<p id="count"></p>
<form>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Kindergarten Supply List:</strong></legend>
<input type="checkbox" class="checkbox-group" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" class="checkbox-group" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" class="checkbox-group" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" class="checkbox-group" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" class="checkbox-group" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>First Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Second Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Third Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Forth Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Fifth Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
<fieldset data-role="controlgroup" id="hoursName">
<legend><strong>Sixth Grade Supply List:</strong></legend>
<input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" >
<label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label>
<input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils">
<label for="2">(2 Quanity) Red Pencils</label>
<input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers">
<label for="3">(1 Quanity) Pack of pink erasers</label>
<input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)">
<label for="4">(1 Quanity) Box of Kleenex (tissue)</label>
<input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers">
<label for="5">(1 Quanity) Pack of pencil cap erasers</label>
</fieldset>
</form>
<button class="ui-btn ui-corner-all Create">Create List</button>
</article><!--content-->
</section>
这是我有的javascript
<div data-role="page" id="nameList"></div>
<script id="jsbin-javascript">
$(".Create").on("click", function() {
var selectedValues = "";
$checkedCheckboxes = $("input:checkbox[name=checkboxsupply]:checked");
$checkedCheckboxes.each(function () {
$('#nameList').append('<li>' + $(this).val() + '</li>');
});
window.location = "#nameList";
});
</script>
任何建议都很好，我试过用jquery来计算数量，但没有成功。
再次感谢。
假设您不能更改任何标记，下面是一种有点技巧的方法：）
$(".Create").on("click", function() {
var valuesToListItemMap = {};
$('#nameList').text("");
$checkedCheckboxes = $("input:checkbox[name=checkboxsupply]:checked");
$checkedCheckboxes.each(function () {
var value = $(this).val();
var element;
if (valuesToListItemMap[value]) {
element = valuesToListItemMap[value];
var newCount = parseInt(element.data('count')) + 1;
element.data('count', newCount);
element.text(value + ' ' + newCount + ' were selected');
} else {
element = $('<li>' + value + '</li>');
element.data('count', 1);
$('#nameList').append(element);
valuesToListItemMap[value] = element;
}
});
window.location = "#nameList";
});
演示：http://jsbin.com/yanaju/4/edit
相关文章：
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 正在将数据主题添加到所有项目
- 我如何找到一个句子中的所有空格并替换忽略它们
- 如何删除重复的选定项目并替换为数量
- 用相同的键替换/更改项目
- 使用下划线一个接一个地替换每个项目(li）
- 替换字符串中的项目
- 替换项目而不是提供整个路径
- JavaScript:有没有更好的方法来保留你的数组，但有效地连接或替换项目
- 通用控件替换项目 - 如何开始
- 下划线 js 替换对象中的项目
- 查找和替换 JSON 文件中的项目
- 下划线.js:替换集合中的项目
- jQuery UI可排序-替换掉的项目的内容
- 使用Gulp和Gulp替换名称克隆一个项目，但重命名多个文件夹中包含某个单词的文件
- 用不同的减速器替换Redux中的整个树项目
- JQuery Ajax用JQuery函数替换项目
- 替换数组中项目的实例
- Meteor:如何将项目推送到用户集合并创建列表或数组，而不是用新项目替换每个项目
- 替换两个项目之间的字符串
