0

多くのコードとサンプルを検索して試しましたが、目的に達しませんでした。私は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: また、テキストをコンマで区切りたいと思います。

4

3 に答える 3

1

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

フィドルの例

于 2013-08-18T14:22:39.387 に答える
0

これを試して

 $('.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();
        }
    });
于 2013-08-18T14:25:02.983 に答える