如何将数组附加到输入，将每个值包装在一个跨度中？

Question

我有一些复选框，每次我 check/uncheck 它们时，我希望将它们的值附加到搜索框，每个值都包含在一个范围内。

这是我目前得到的：

现在我只是在每次数组更改时将数组添加到输入值中：

updateInputBox = function(query) {
  var inputBox;
  inputBox = $("#searchBox")
  inputBox.val(checkboxes);
}

看这里：https://jsfiddle.net/g7n9zpow/

我在思考如何围绕每个值获取 <span> 时遇到了麻烦。我想到了迭代数组，并将值附加到输入的值，但是我必须先检查输入是否已经是空白..它变得混乱。我以为这很容易。

编辑

事实证明，尝试将 <span/> 放入输入中是愚蠢的。我想要它，这样我就可以像这样设置每个值的样式：

Answer 1

您可以像下面那样使用 map() 函数。

$(':checkbox').change(function () {
    var checkboxes = $(':checkbox:checked').map(function () {
        return '<span>' + this.value + '</span>'
    }).get().join('');

    $("#searchBox").val(checkboxes);
})

UPDATED FIDDLE

Answer 2

只需将它们包裹在 <span></span> 中然后按下：

$(':checkbox').change(function() {
  var $this = $(this);
  if ($(this).is(':checked')) {
    checkboxes.push('<span>'+$this.val()+'</span>') // <-- here
    updateInputBox(checkboxes)
  } else {
    index = checkboxes.indexOf('<span>'+$this.val()+'</span>'); // <-- and here
    if (index > -1)
      checkboxes.splice(index, 1);
    updateInputBox(checkboxes)
  }
  return console.log(checkboxes);
});

Updated fiddle

Answer 3

您可以使用具有 contenteditable 属性集的 div 元素，button 元素；使用 $.map() , $.filter() ; css :before 样式 "x"

    var checkboxes = [],
      elems = $(":checkbox"),
      inputBox = $("#searchBox");

    updateInputBox = function(query) {
      inputBox.html(query);
    }

    elems.change(function() {
      checkboxes = $.map(elems.filter(":checked"), function(el, i) {
        return checkboxes.indexOf(el.value) < 0 
               && "<button>" + el.value + "</button>"
      });
      updateInputBox(checkboxes)
      console.log(checkboxes);
    });

#searchBox {
  border: 1px solid gray;
  width: 80%;
}
button:before {
  content: "x ";
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="checkboxes">
  <label>
    <input type="checkbox" value="Tom Hanks" name="actorName">Tom Hanks</label>
  <label>
    <input type="checkbox" value="Tim Allen" name="actorName">Tim Allen</label>
  <label>
    <input type="checkbox" value="Don Rickles" name="actorName">Don Rickles</label>
  <label>
    <input type="checkbox" value="Jim Varney" name="actorName">Jim Varney</label>
  <label>
    <input type="checkbox" value="Wallace Shawn" name="actorName">Wallace Shawn</label>
  <label>
    <input type="checkbox" value="Fantasy" name="genreName">Fantasy</label>
  <label>
    <input type="checkbox" value="Comedy" name="genreName">Comedy</label>
  <label>
    <input type="checkbox" value="Children" name="genreName">Children</label>
  <label>
    <input type="checkbox" value="Animation" name="genreName">Animation</label>
  <label>
    <input type="checkbox" value="Adventure" name="genreName">Adventure</label>
  <label>
    <input type="checkbox" value="USA" name="countryName">USA</label>
</div>
<div contenteditable id="searchBox"></div>

jsfiddle https://jsfiddle.net/g7n9zpow/11/

如何将数组附加到输入，将每个值包装在一个跨度中？

How to append an array to an input, wrapping each value in a span?

javascript

arrays

jquery

input

append

UPDATED FIDDLE