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