Question

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

这是我到目前为止所得到的：

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

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

您可以将div元素与contenteditable属性集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/

如何将数组附加到输入，包裹跨度中的每个值？

3 个答案:

UPDATED FIDDLE