当一个框未被选中时，它会清除复选框中先前填充的文本

Question

如何在取消选中复选框时清除复选框中先前填充的文本？

下面的代码列表是当您选中一个框并在文本区域中填充文本时。

$('input:checkbox').click(function(){
    var tb = "#"+$(this).attr('rel');
    if($(this).is(":checked"))
        $(tb).append(this.name + "\n");

        else($(tb)).removeAttr(":checked");
})

Answer 1

您可以使用 replace() 函数从文本字段中删除名称。

$('input:checkbox').click(function() {
  var tb = "#" + $(this).attr('rel');
  let text_to_add = this.name + "\n";
  if ($(this).is(":checked")) {
    $(tb).append(text_to_add);
  } else {
    let remove = this.name + "\n";
    $(tb).text(function(i, text) {
      return text.replace(text_to_add, '');
    });
  }
})

Answer 2

以下脚本汇集了选中的复选框的 name 属性值，并将它们放入由复选框的 rel 属性寻址的文本框中：

$('input:checkbox').click(function(){
    var tb = $(this).attr('rel');
     $("#"+tb).val($("[rel="+tb+"]:checked").map((i,e)=>e.name).get().join("\n"))

})

textarea {height:50px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input name="one" type="checkbox" rel="mytext">one</label>
<label><input name="two" type="checkbox" rel="mytext">two</label>
<label><input name="three" type="checkbox" rel="mytext">three</label><br>
<textarea id="mytext"></textarea>
<br>
<label><input name="four" type="checkbox" rel="text2">4</label>
<label><input name="five" type="checkbox" rel="text2">5</label>
<label><input name="six" type="checkbox" rel="text2">6</label><br>
<textarea id="text2"></textarea>

当一个框未被选中时，它会清除复选框中先前填充的文本

when a box is unchecked it clears the previously populated text from checkbox

javascript

jquery