Question

我不认为我能尽力解释自己last time，所以我要再给它一次。从以下代码：

<div id="addons" class="grid_12 omega">
    <div class="addon"> 
        <span><input type="checkbox" name="addon_1" value="addon_1"></span>
        <span class="title">Title 1 here</span>
        <span class="cost">$<em>49</em></span>
        <p>Some text here</p>
    </div>
    <div class="addon"> 
        <span><input type="checkbox" name="addon_2" value="addon_2"></span>
        <span class="title">Title 2 here also</span>
        <span class="cost">$<em>95</em></span>
        <p>Some more text.</p>
    </div>
    <div id="summaries" class="hidden">
        <input type="button" id="totalme" name="totalme">
        <input type="text" value="" id="addons_titles" name="addons_titles"><!-- item titles array, from addons that are checked  -->
        <input type="text" value="" id="addons_cost" name="addons_cost"><!-- total cost, from addons that are checked -->
    </div>
</div>

对于所有“输入[type =复选框] [已选中] ”（已检查的插件），我正在尝试：

将“ .addon .title输入[名称] ”中的标题汇总为输入#addons_titles （每个标题用竖线字符分隔 - 例如：“项目1标题|第2项标题“）
以及从“ .addon .cost em ”到输入#addons_cost

我认为Obalix和Nick Craver之前给出的代码是标记的，我只是不确定如何编辑它只针对选定的插件执行此操作。

另外我不确定如何触发这个。我假设我应该在提交按钮上运行它，这样数组只创建一次 - 否则标题可以不断添加到一个重复的数组中？

欣赏你的想法。

Answer 1

我认为你的问题现在更清楚了。

这将符合您的要求：

$('#totalme').click(function () {
  var items = $('input:checkbox:checked'), // checked elements
      titles = [], // store the selected titles
      totalCost = 0; // store the total cost

  items.each(function () { // iterate over the checked elements
    var addon = $(this).closest('div.addon'), // get the closest div.addon
        title = $('span.title', addon).text(), // get title 
        cost = +$('span.cost em', addon).text(); // get cost coerced to number

    titles.push(title); // add the title
    totalCost += cost;  // add the cost to sumarize
  });

  $('#addons_titles').val(titles.join('|'));//join all titles with | as separator
  $('#addons_cost').val(totalCost); // show the amout

});

查看实时示例here。

Jquery：向文本框添加多个值（第二轮）

1 个答案: