javascript - 如何将添加的文本保存到 Jquery 文本区域中的复选框值？

Question

我有一个文本区域和几个复选框。每当我选择复选框时，它都会转到文本区域，但是当我手动将一些字符串数据添加到复选框的值并取消选中或选中相同或其他复选框时，添加的字符串数据就会消失。

例如，假设我有 CB1、CB2、CB3、CB4 作为复选框。我检查了 CB1、CB2 和 CB4。所以，textarea中当前时间点的值是:

CB1
CB2
CB4

现在，我添加了一些数据:

CB1Apple Mango
CB2Orange
CB4

现在，如果我选中复选框 CB3，那么实际结果是:

CB1
CB2
CB3
CB4

但预期结果是:

CB1Apple Mango 
CB2Orange 
CB3
CB4

假设我现在取消选中 CB4:那么实际结果是:

CB1
CB2
CB3

但预期结果是:

CB1Apple Mango 
CB2Orange 
CB3

假设我现在取消选中 CB2:那么实际结果是:

CB1

CB3

但预期结果是: CB1苹果芒果
CB3

我试过的代码是:

$("#input_one :checkbox").change(function() {   
          var text = $("#input_one :checked").map(function() {
          return this.value;
          }).get().join("\n");
         //console.log("text : " + text);
       $(".areaText").val(text);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input_one">
          <textarea rows="8" maxlength="500" class="areaText" ></textarea>  
          <input type="checkbox"  value="CB1">CB1
          <input type="checkbox"  value="CB2">CB2
          <input type="checkbox"  value="CB3">CB3
          <input type="checkbox"  value="CB4">CB4
    </div>

Answer 1

您当前的实现从 4 个复选框的值派生文本区域状态。您在每个复选框上都有一个监听器，当它们被“更改”时，您将文本区域内容重置为“选中”复选框的当前值与换行符连接作为分隔符。这就是文本区域中的更改被覆盖的原因。

如果您希望绑定(bind)文本区域以更改复选框值，您可以这样做:

$('textarea').on('input', function () {
  var checkboxes = $('input[type=checkbox]:checked');
  var currentContentPartitioned = this.value.split('\n');

  currentContentPartitioned.map(function (p, i) {
    checkboxes.eq(i).val(p);
  });
});