Question

当用户选中复选框时，我的应用程序中有一个功能，某些文本会附加到已包含某些文本的标签上。我现在要做的是，如果用户取消选中该复选框，则必须删除刚刚添加的文本。基本文本可能无法删除。

我有以下代码： HTML：

<input id="chkbox1" type="checkbox" />
<label id="lbl1">this is a test</label>

JQuery的：

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:juergen@mail.de \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').replace(vcard, '');
    }
});

任何帮助都将不胜感激。

Answer 1

我只需在标签内放置一个span，然后设置/清空它：

<label id="lbl1">this is a test<span id='lbl1DynamicText'></span></label>

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:juergen@mail.de \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1DynamicText').text(vcard);
    } else {
        $('#lbl1DynamicText').text('');
    }
});

Answer 2

看到这个。 http://jsfiddle.net/naeemshaikh27/en1p676b/

将文本放在一个范围内，然后如果选中该复选框则附加，否则删除范围。

$('#chkbox1').click(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "<span>\n Jürgen \n Marketing und Vertrieb \n e-mail:juergen@mail.de \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n</span> ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').find("span").remove();
    }
});

Answer 3

您可以设置空html：

$('#lbl1').html('');

Answer 4

尝试更好的解决方案，您可以附加一个范围并在不使用replace的情况下将其删除，

var vcard = "\n Jürgen ... +49 211 123456789 \n ";
$('#chkbox1').click(function () {        
    if (this.checked) {        
        $('#lbl1').append(<'span id="span-vcard">'+vcard+'</span>');
    } else {
        $('#lbl1').find('#span-vcard').remove();
    }
});

Answer 5

尝试编写此代码，

$('#chkbox1').change(function () {
    if ($('#chkbox1').is(':checked')) {
        var vcard = "\n Jürgen \n Marketing und Vertrieb \n e-mail:juergen@mail.de \n anschrift In test 18 \n 40599 Düsseldorf \n Deutschland \n website www.test.de \n telefon +49 211 123456789 \n mobil +49 177 123456789 \n fax +49 211 123456789 \n ";
        $('#lbl1').append(vcard);
    } else {
        $('#lbl1').html('');
// or   $('#lbl1').empty();
    }
});

Answer 6

如果文本没有动态加载，那么为什么不将它放入html本身并只显示/隐藏内容：

＆＃13;

$(function() {
  $('#chkbox1').on('change', function() {
    $('#txt').toggle(this.checked);
  }).trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="chkbox1" type="checkbox" />
<label id="lbl1">this is a test<span id='txt'><br/>Jürgen <br/> Marketing und Vertrieb <br/> e-mail:juergen@mail.de <br/> anschrift In test 18 <br/> 40599 Düsseldorf <br/> Deutschland <br/> website www.test.de <br/> telefon +49 211 123456789 <br/> mobil +49 177 123456789 <br/> fax +49 211 123456789 <br/></span>
</label>

＆＃13;

取消选中复选框时删除字符串

6 个答案: