Javascript 将所选复选框复制到另一个div

此代码用于表单，用户可以在其中选择各种内容并显示其当前选择。我希望它显示实际的元素，而不是元素的文本，因为最终它将是一个图像缩略图

我发现代码与我需要的类似，尽管它只将文本值放入另一个div。我需要实际的输入元素，而不仅仅是纯文本。我已经尝试从javasript中删除.text，但是没有将任何内容复制到div中

HTML:

试试这个：

 $(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).attr('id'); }).get();
    $("#myDiv").text(arr.join(', '));
  });
});

---

使用html代替文本，用于获取和设置

克隆标签并添加到目标div myDiv

---

首先，不是从map函数返回字符串，而是返回选中输入的克隆及其下面的标签。然后，您只需将元素数组附加到div中即可。请参见下文，与您提供的代码相比，我基本上没有改变代码，只是进行了必要的更改，以实现您的目标-

$function{ $：checkbox.changefunction{ //清除myDiv的内容 $myDiv.empty； var arr=$：复选框：checked.mapfunction{ //这将选择当前元素，添加以下内容 //项，并返回的克隆版本 //挑选 返回$this。添加$this.next.clone； }.获得； //将项目添加到myDiv $myDiv.appendarr； }; }; 一 二 三 四 结果:

---

虽然您已经接受了答案，但我还是建议您使用以下方法，第一种是使用jQuery：

// caching the element (of id='myDiv') in which
// the output should be displayed:
var results = $('#myDiv'),

// because we'll be using this collection at least twice,
// the first to bind the event-handlers and the second
// to find the checked elements, we cache it here to
// reduce DOM queries:
    checks = $('#ctl00_ContentPlaceHolder1_divServices input[type=checkbox]');

// binding the anonymous function of the on() method
// as the event-handler of the 'change' event:
checks.on('change', function() {

  // caching the checked check-box <input> elements
  // and their next-sibling (the associated <label>):
  var clones = checks
    // filtering the cached list of check-box <input>
    // elements to retain only those that are checked:
    .filter(':checked')
    // finding the next-sibling element
    .next()
    // adding back the previous collection, that of the
    // checked check-box elements:
    .addBack()
    // cloning those elements
    .clone()
    // iterating over each element of the collection:
    .each(function() {
      // if the element has an id, and has a type and that
      // type is exactly equal to 'checkbox':
      if (this.id && this.type && this.type === 'checkbox') {
        // we remove the id attribute (a duplicate id
        // renders the document invalid); we leave the
        // 'for' attribute of the <label> alone because
        // that way it still triggers the 'change' event
        // of the cloned/'original' checkbox, which maintains
        // desired functionality:
        this.removeAttribute('id');
      }
    });

  // here we remove the current/previously-set contents
  // of the results element (cached above):
  results.empty()
    // and append the just-found cloned elements:
    .append(clones);
});

一 二 三 四 结果:

---

我需要实际的输入元素，我不确定我是否真的理解你想要什么。你能详细说明一下吗？是否要检索整个元素本身？如果是这样的话，cloneNode或jQuery的.clone可能会有用，但它们确实有一些警告。在获取和设置时使用html而不是文本谢谢Drew，是的，我指的是整个元素。我会尝试这两种建议，谢谢。谢谢Roozbeh，html做到了这一点！但我不能将此标记为已解决。+1，回答得很好！虽然在我为use:checkbox辩护时，我基本上没有改变OP的原始代码，只做了为达到目标所需的更改。重新阅读问题，尽管引用的代码似乎只是从web上提取的，因此从教学的角度来看，使用文档对函数进行完整的重新编写似乎是一个非常好的主意。

 $(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).attr('id'); }).get();
    $("#myDiv").text(arr.join(', '));
  });
});

$(function() {
  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() { return $(this).next().html(); }).get();
    $("#myDiv").html(arr.join(', '));
  });
});

$(function() {
    $(":checkbox").change(function() {
        var arr = $(":checkbox:checked").map(function() {
            return $(this).next();
        }).get();
        $("#myDiv").html('');
        arr.forEach(function(a) {
            $("#myDiv").append($(a).clone());
        });
    });
});

// caching the element (of id='myDiv') in which
// the output should be displayed:
var results = $('#myDiv'),

// because we'll be using this collection at least twice,
// the first to bind the event-handlers and the second
// to find the checked elements, we cache it here to
// reduce DOM queries:
    checks = $('#ctl00_ContentPlaceHolder1_divServices input[type=checkbox]');

// binding the anonymous function of the on() method
// as the event-handler of the 'change' event:
checks.on('change', function() {

  // caching the checked check-box <input> elements
  // and their next-sibling (the associated <label>):
  var clones = checks
    // filtering the cached list of check-box <input>
    // elements to retain only those that are checked:
    .filter(':checked')
    // finding the next-sibling element
    .next()
    // adding back the previous collection, that of the
    // checked check-box elements:
    .addBack()
    // cloning those elements
    .clone()
    // iterating over each element of the collection:
    .each(function() {
      // if the element has an id, and has a type and that
      // type is exactly equal to 'checkbox':
      if (this.id && this.type && this.type === 'checkbox') {
        // we remove the id attribute (a duplicate id
        // renders the document invalid); we leave the
        // 'for' attribute of the <label> alone because
        // that way it still triggers the 'change' event
        // of the cloned/'original' checkbox, which maintains
        // desired functionality:
        this.removeAttribute('id');
      }
    });

  // here we remove the current/previously-set contents
  // of the results element (cached above):
  results.empty()
    // and append the just-found cloned elements:
    .append(clones);
});