jquery - 在复选框输入更改时切换文本

Question

我搜索并尝试了很多代码和示例，但我没有明白我的意思。我有 3 个checkbox输入，labels每个之后有 3 个，并且div包括一个<p>标签。我希望当我检查 each 时checkbox，要在标签中复制下一个标签文本<p>，当我取消选中它时，删除<p>标签中的文本。<p>我的意思是通过更改输入来切换标签内的标签文本。

我的 HTML 代码：

<div class="chbxs">
    <input type="checkbox" name="country" id="Iran" rel="Iran" />
    <label for="Iran">Mashad,Tehran</label>

    <input type="checkbox" name="country" id="England" rel="England" />
    <label for="England">London,Manchester</label>

    <input type="checkbox" name="country" id="USA" rel="USA" />
    <label for="USA">California,NewYork</label>
</div>
<div class="countries">
    <p></p>
</div>

我的jQuery代码：

$('.chbxs input[type="checkbox"]').click(function() {
    var chkdChkbox = $(this).next('label').text();
    if ($(this).prop('checked') == true) {
        $('.countries > p').append('<span>' + chkdChkbox + '</span>');
    }
    else {
        $('.countries > p').children('span').remove();
    }
});

问题是如果我取消选中输入，所有跨度都将被删除。我怎样才能解决这个问题？坦克你这么多。PS：我也想用逗号分隔文本。

Answer 1

尝试

var $contriesp = $('.countries > p');
$('.chbxs input[type="checkbox"]').click(function(){
    var $chk = $(this), rel = $chk.attr('rel');
    if (this.checked) {
        $('<span />', {
            html: $chk.next('label').text()
        }).appendTo($contriesp).attr('rel', rel)
    } else {
        $contriesp.children('span[rel="' + rel + '"]').remove();
    }
});

演示：小提琴

Answer 2

您需要修改逻辑，以便生成文本时考虑所有checkboxes已检查的内容，而不是单击的内容。试试这个：

var setCountryText = function() {
    var $p = $('.countries > p').empty();
    $('.chbxs :checkbox:checked').each(function() {
        $p.append('<span>' + $(this).next('label').text() + '</span>');
    });
}

$('.chbxs input[type="checkbox"]').click(setCountryText);

示例小提琴

Answer 3

试试这个

 $('.chbxs input[type="checkbox"]').click(function() {
        var chkdChkbox = $(this).next('label').text();
        var chkdChkboxId = $(this).attr("id");
        if ($(this).prop('checked') == true) {
            $('.countries > p').append('<span id="country_'+chkdChkboxId +'">' + chkdChkbox + '</span>');
        }
        else {
            $('.countries > p').children('#country_'+chkdChkboxId).remove();
        }
    });