如何删除重复的选定项目并替换为数量

Question

我一直在为学校做这个项目。这是 K-J 等级的供应清单。每个年级都有#2 铅笔和各种其他类似物品。当你 select 幼儿园的一项（#2 铅笔）和 select 五年级的同一项目时，然后生成列表我不需要 #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 作为计算数量的方法，但没有成功。

再次感谢。

Answer 1

假设您无法更改任何标记，您可以使用一种有点老套的方法来执行此操作:)

  $(".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

如何删除重复的选定项目并替换为数量

How to remove duplicate selected items and replace with quantity

html

javascript

jquery

jquery-mobile