jQuery在输入文本框中显示了选中的复选框值，并且取消选中将删除

Question

我一直在尝试找到标题中所述的解决方案，其中当您有多个复选框并且当您选中带有诸如“ blood”之类的值的复选框时，将添加到输入文本框中。 文本框中的每个选中值都将以空格或逗号分隔。 取消选中复选框时，与之对应的值将从文本框中删除。

到目前为止，我遇到的最接近的示例就是以下示例：按单击顺序在文本框中显示复选框值

我试图通过使用<input type="text" name="text" id="results" value="" />并具有$li.text(this.value); 到$li.val(this.value); 但什么也没出现。 不幸的是，jQuery不是我的专长。

如果可能的话，有人可以说一下吗？

Answer 1

也许这就是您所需要的？

var arr = [];
$('#inputs input').change(function() {
  if (this.checked) {
    arr.push(this.value);
  }
  else {
   arr.splice(arr.indexOf(this.value), 1);
  }
  $('#target').val(arr + '');
});

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>

<body>
  <div id="inputs">
    <input type="checkbox" value="Apple">
    <input type="checkbox" value="Orange">
    <input type="checkbox" value="Pineapple">
    <input type="checkbox" value="Mango">
  </div>
  <input type="text" id="target"/>
</body>
</html>

Answer 2

尝试这个

小提琴演示

在这里，您只需要在所有复选框上应用click事件。 并在每次点击时填写输入框。

jQuery在输入文本框中显示了选中的复选框值，并且取消选中将删除

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-02-18 06:25:57

解决方案2
0 2014-02-18 06:34:24

jQuery在输入文本框中显示了选中的复选框值，并且取消选中将删除

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-02-18 06:25:57

解决方案2 0 2014-02-18 06:34:24

解决方案1
1 已采纳 2014-02-18 06:25:57

解决方案2
0 2014-02-18 06:34:24