Question

在这里寻求帮助。我必须创建一个价格检查计算器。有两件事需要做：

如果选中具有不同值的复选框，则必须在某处显示整体价格。
我需要所有选定项目的摘要。所以我需要将所选项目置于整体价格之下。

我设法让第1点工作。但我在第2点挣扎。我不知道如何将检查过的物品放在其他地方。

Heres我有多远：

<row>

为了更好地理解JSFIDDLE

我很感激一些帮助。非常感谢！

Answer 1

尝试使用以下代码

我在这里做的是，使用下一个兄弟选择器+来挑选相关的标签元素。并获取其文本并将其映射到数组，然后显示结果。

$('.overallprice').append($("<div>", {
  text: $("[type='checkbox']:checked + label").map(function() {
   return $(this).contents()[0].nodeValue;
  }).get()
}));

DEMO

Answer 2

您需要遍历复选框并获取标签值：

选中复选框并循环显示它们。
对于每一个，获取下一个标签的文本内容并附加它。

<强>代码

// get the checked check boxes
$("input:checked").each(function () {
    // for each one, get the label's text content that's next and append it.
    $('.overallprice').append("<br>" + $(this).next("label").text());
});

小提琴：https://jsfiddle.net/truvrurc/

Answer 3

我提供了与之前的问题类似的方法，但确保您只获得项目名称而不是sumary的价格。

首先，将此添加到HTML：

<h4>Sumary:</h4>
<ul id="sumary">
</ul>

然后在复选框点击事件结束时添加此循环：

//Sumary
    $("#sumary").html('');
    $('input:checked').each(function(){
      $("#sumary").append("<li>" + $(this).next("label").clone().find("span").remove().end().text() + "</li>");
    });

我将您的jsFiddle与演示更改分开。

当选中复选框时，Jquery存储字符串并将其放在别处

3 个答案:

DEMO