Appending strings from checkbox click

Question

I am trying to generate a string of the data attributes (so the chars from M to F)

Attached is my HTML

    <div id="days" class="checkbox">
        <label>
            <input data-date="M" type="checkbox"> Mon
        </label>
        <label>
            <input data-date="T" type="checkbox"> Tues
        </label>
        <label>
            <input data-date="W" type="checkbox"> Wed
        </label>
        <label>
            <input data-date="R" type="checkbox"> Thurs
        </label>
        <label>
            <input data-date="F" type="checkbox"> Fri
        </label>
    </div>

This is my jQuery:

    $(function(){
        var days = '';
        $("input[type='checkbox']").change(function(){
            var item=$(this);
            if(item.is(":checked"))
            {
                days += ($('#days label input').data('date'));
            }
        });
    });

This is what the program looks like:

What happens when I click the days, is, I could click the Wednesday checkbox, but only the M gets appended. I would click Friday checkbox, and the M would be appended.

M

MM

MMM

How do I append the MTWRF as well as remove them when they are unclicked?

use the .map() function to get the list of checked checkboxes. try this fiddle. jsfiddle.net/pauwtxfd/1 I am returning an array of checked checkboxes. check the console for output — Sushil
– Sushil, Commented Aug 18, 2015 at 16:58
posted my solution @theGreenCabbage. please upvote it and mark it as an answer if it helped you. — Sushil
– Sushil, Commented Aug 18, 2015 at 17:01

Sushil · Accepted Answer · 2015-08-18 17:01:03Z

4

try using the .map() function in jquery.

update your js code like this

 $(function() {
     var days = '';
     $("input[type='checkbox']").change(function() {
         var searchIDs = $("input:checkbox:checked").map(function() {
             return $(this).data('date');
         }).toArray();
         console.log(searchIDs);
     });

 });

here's a working JSFIDDLE

answered Aug 18, 2015 at 17:01

Sushil

2,8434 gold badges23 silver badges29 bronze badges

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

4 Comments

theGreenCabbage Over a year ago

Will accept this one. I also turned the array to string and removed the ,

Sushil Over a year ago

great. yeah you can use it anyway. i used the array incase u might need it somewhere in the code.

Sushil Over a year ago

can you please accept this as an answer when you get a chance?

Sushil Over a year ago

oh ok. Thank you very much. m glad my answer helped you :)

j08691 · Accepted Answer · 2015-08-18 16:59:30Z

1

You need to clear the days variable between clicks and iterate over the inputs each time one changes:

$("input[type='checkbox']").change(function () {
    var days = '';
    $("input[type='checkbox']").each(function () {
        if ($(this).is(":checked")) days += $(this).data('date');
    })
    console.log(days)
});

jsFiddle example

answered Aug 18, 2015 at 16:59

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

epascarello · Accepted Answer · 2015-08-18 16:59:51Z

1

You are selecting all the elements, not the current one in the loop. When you read the data, it only selects the first one. Use map()

$("input[type='checkbox']").change(function(){
    var days = $('#days label input:checked')  //get the checked inputs
        .map( function () {
            return $(this).data('date');  //return the data attribute
        }).get().join("");  //convert to array and than string
    console.log(days);
});

answered Aug 18, 2015 at 16:59

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

leo.fcx · Accepted Answer · 2015-08-18 17:02:45Z

1

Use this instead '#days label input' to make reference to the item that was checked.

In your code, replace:

days += ($('#days label input').data('date'));

By:

days += ($(this).data('date'));

answered Aug 18, 2015 at 17:02

leo.fcx

6,4972 gold badges23 silver badges37 bronze badges

Comments

bashleigh · Accepted Answer · 2015-08-18 17:02:58Z

1

With inputs it's bets to use the value attribute. you could do it like this:

$('input[type="checkbox"]').change(function(){
    var days=$(this).map(function(){return this.val()/*or attr('data-date')*/;}).get();
    console.log(days);
});

jQuery.map makes an array of your input's values so it'll look like this ['M','T','W','TH','F']

You could then use .each to convert this into a string say:

days.each(function(i){daysSting+=i});

answered Aug 18, 2015 at 17:02

bashleigh

9,4145 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

Appending strings from checkbox click

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related