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

【问题标题】：jQuery checked checkbox value shown in input textbox and uncheck will removejQuery选中的复选框值显示在输入文本框中，取消选中将删除
【发布时间】：2014-02-19 06:49:25
【问题描述】：

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

到目前为止，我遇到的最接近的例子来自这个：Display checkbox value in textbox in the order of click

我尝试通过使用<input type="text" name="text" id="results" value="" /> 并将$li.text(this.value); 更改为$li.val(this.value); 来稍微更改代码，但没有出现任何内容。不幸的是，jQuery 不是我的专长。

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

【问题讨论】：

标签： javascript jquery html input checkbox

【解决方案1】：

也许this 是你需要的？

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>

【讨论】：

非常感谢，这正是我所需要的！
顺便说一句，因为我的文本框使用 $("#keywords").keyup(function() 来激活 ajax 以在不提交的情况下进行搜索。所以即使将复选框的值输入到文本框中，它也不会激活ajax 直到我单击文本框并按回车键。无论如何要解决这个问题？干杯
只需在复选框更改事件处理程序中调用您的 ajax 搜索功能。
@kamilkp：作为旁注，请记住，仅仅一个链接并不是一个高质量的答案。最好还包括（相关）代码，这样即使链接失效，内容仍然存在。我已经冒昧地为你做这件事了。

【解决方案2】：

试试这个

Fiddle demo

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

【讨论】：