在复选框输入更改上切换文本

Question

我搜索并尝试了很多代码＆amp;样品，但我没有达到我的观点。 我有3 checkbox个输入和3 labels个输入，div包含<p>个标记。 我希望当我检查每个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();
    }
});

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

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

演示：Fiddle

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); 。试试这个：

{{1}}

Example fiddle

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