如何将添加的文本保留在 Jquery 的 textarea 中的复选框值中？答案

【问题标题】：How to keep the added text to the checkbox value in the textarea in Jquery?如何将添加的文本保留在 Jquery 的 textarea 中的复选框值中？
【发布时间】：2019-07-23 04:42:29
【问题描述】：

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

例如，假设我有 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>

【问题讨论】：

您在每个复选框中覆盖了 textarea 文本选中或未选中 $(".areaText").val(text);
@Omi 你能帮我写代码吗？我找不到你。
@NikantChaudhary Apple Mango Orange 来自哪里？
@AswinKumar 这是通过键盘手动输入 textArea 的。

标签： javascript jquery

【解决方案1】：

你好，你一定要试试这个

      $("#input_one :checkbox").change(function() {
    let textAreaVal=$(".areaText").val();
    if($(this).prop("checked")==true){
      if(!textAreaVal.includes($(this).val())){
        textAreaVal += $(this).val()+"\n";
      }
    }
    else{
       if(textAreaVal.includes($(this).val())){
        textAreaVal = textAreaVal.replace($(this).val(),"");
      }
    }

   $(".areaText").val(textAreaVal);
});

Codpen link

【讨论】：

如果我添加一些数据为：CB1Apple Mango CB2Orange CB4，如果我取消选中 CB2，那么它应该是：CB1Apple Mango CB4 在你的情况下它是：CB1Apple Mango Orange CB4。
@NikantChaudhary，我不这么认为；您可以根据自己的要求进行修改；谢谢。

【解决方案2】：

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

如果您希望绑定 textarea 以更改复选框值，您可以执行以下操作：

$('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);
  });
});

【讨论】：