当复选框未选中时，它将从复选框中清除先前填充的文本

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>