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

Question

I've been trying to find the solution as said in my title where when you have multiple checkboxes and when you check a checkbox with the value such as "blood" will be added to an input textbox. 我一直在尝试找到标题中所述的解决方案，其中当您有多个复选框并且当您选中带有诸如“ blood”之类的值的复选框时，将添加到输入文本框中。 Each checked value in the textbox will be separated either with space or a comma. 文本框中的每个选中值都将以空格或逗号分隔。 When you uncheck a checkbox the value corresponding to it will be removed from the textbox. 取消选中复选框时，与之对应的值将从文本框中删除。

So far the closest example i've came across is from this one: Display checkbox value in textbox in the order of click 到目前为止，我遇到的最接近的示例就是以下示例：按单击顺序在文本框中显示复选框值

I've tried to change the code around a bit by using <input type="text" name="text" id="results" value="" /> and having $li.text(this.value); 我试图通过使用<input type="text" name="text" id="results" value="" />并具有$li.text(this.value); to $li.val(this.value); 到$li.val(this.value); but nothing appears. 但什么也没出现。 Unfortunately jQuery isn't what I specialize in. 不幸的是，jQuery不是我的专长。

If possible can someone please shed some light? 如果可能的话，有人可以说一下吗？

Answer 1

Maybe this is what you need? 也许这就是您所需要的？

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

Try this 尝试这个

Fiddle demo 小提琴演示

here you just need to apply a click event on all your check boxes. 在这里，您只需要在所有复选框上应用click事件。 and fill the input box on every 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