CODEWITHSUNDEEP
javascriptjquery
theGreenCabbage
theGreenCabbage

Reputation: 4845

Appending strings from checkbox click

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:

enter image description here

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?

Upvotes: 2

Views: 1017

Answers (5)

bashleigh
bashleigh

Reputation: 9324

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

Upvotes: 1

leo.fcx
leo.fcx

Reputation: 6467

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

Upvotes: 1

Sushil
Sushil

Reputation: 2835

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

Upvotes: 4

epascarello
epascarello

Reputation: 207557

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

Upvotes: 1

j08691
j08691

Reputation: 208032

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

Upvotes: 1

Related Questions