Question

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

到目前为止，我遇到的最接近的例子来自这个：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不是我的专长。

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

Answer 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>

Answer 2

试试这个

Fiddle demo

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

jQuery检查输入文本框中显示的复选框值，取消选中将删除

2 个答案: