Toggle text, on a checkbox input change

Question

I have 3 checkbox inputs and 3 labels after each, and a div including a  tag. I want when I check each checkbox, the next label text to be copied in the  tag, and when I uncheck it, remove the text in  tag. I mean toggling the label text inside the  tag by changing the inputs.

my HTML code :

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

my jquery code :

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

The problem is that if I uncheck an input, all spans will be removed. How can I fix this?
P.S: I also want to separate texts from each other by a comma.

Give an id or class to the span. id would be better if there would be only one. — Vivek Jain
– Vivek Jain, Commented Aug 18, 2013 at 14:20

Rory McCrossan · Accepted Answer · 2013-08-18 14:22:39Z

1

You need to amend the logic so that the text is generated taking into account all the checkboxes which are checked, not the one which was clicked on. Try this:

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

Example fiddle

answered Aug 18, 2013 at 14:22

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Payam Shakibafar Over a year ago

thank you so much, one more thing please. I want to separate them with comma. if I use $p.append('' + $(this).next('label').text() + '',',') then it will put comma after each one. I just want the comma to be added when another text comes after. If it becomes complicated just let it go, it's not so important

Arun P Johny · Accepted Answer · 2013-08-18 14:20:45Z

1

Try

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

Demo: Fiddle

answered Aug 18, 2013 at 14:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Farhan · Accepted Answer · 2013-08-18 14:25:02Z

0

Try this

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

answered Aug 18, 2013 at 14:25

Farhan

7525 silver badges10 bronze badges

Collectives™ on Stack Overflow

Toggle text, on a checkbox input change

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related