On checkbox click storing value into an array

Question

I have an checkbox list like following:

$('.check-user').click(function() {
    var $this = $(this);
    var user_id = $this.attr('value');
    var brandContainer = $this.closest('.pop-state').siblings('.pop-brands');
    brandContainer.html('<p style="margin: 10px !important;">Processing... </p>');
    $.post('/user/usersBrands', { userId: user_id } , function(data) {

        var brands = JSON.parse(data);
        var container = $('<div class="pop-mission-co" />');

        brands.forEach(function (brand, index) {
            var isRegisteredToBrand = null;
            if(brand.userId==null)
            {
                isRegisteredToBrand = false;
             }
            else{
                isRegisteredToBrand = true;
            }
            container.append(buildBrand(brand.id, brand.name, isRegisteredToBrand, index));
        });
        function buildBrand(id, name, isActive, index) {
            var isChecked = isActive ? 'checked="checked"' : ' ';
            return $(
                '<div class="pop-mission-to">' +
                    '<label>' +
                        '<input class="check-brand"' +
                            isChecked +
                            'type="checkbox"' +
                            'name=""' +
                            'value="' + id + '"' +
                            'data-id="' + index + '">'
                                + name +
                    '</label>' +
                '</div>'
            );
        }
        brandContainer
            .children('p').remove();
        brandContainer
            .html(container)
            .find('.pop-mission-co').show();
    });
    brandContainer.on('change', '.check-brand', function() {

        console.log($(this).attr("checked"));

    });
});

The checkbox list is created after a $.post in jQuery and now I need to handle the event when each of these checkboxes is checked like following:

 brandContainer.on('change', '.check-brand', function() {

            console.clear();
    var checked = "";
    if($(this).attr("checked"))
    {
        checked = "checked";
    }
    else
    {
        checked = "unchecked";
    }
    console.log(checked);
    console.log($(this).val());

        });

As you can see I'm using a delegated event handler to check whether the checkbox has been checked or not... When a user clicks on 1 checkbox I should put it in the array like following:

Array { "checked", "1" }

When user clicks on another checkbox the array should be updated like this:

Array {  "checked", "1", "checked", "2" }

If the user unchecks the checkbox that he already checked, lets say second one with value 2, the array should look like this:

Array { "checked", "1", "unchecked", "2" }

The process goes on... Can someone help me out with this ? Thanks a lot ! :)

Guys I've updated my question and shown how I fetch the value of the current textbox and whether it is checked or not... — perkes456
– perkes456, Commented Jun 8, 2016 at 9:14
I think you want to create dynamically named property. check this one stackoverflow.com/questions/2318532/… — Shoaib Ijaz
– Shoaib Ijaz, Commented Jun 8, 2016 at 9:16
Why dont you create an array like Array { 1=> 'checked' , 2 => 'unchecked' } — Amar Singh
– Amar Singh, Commented Jun 8, 2016 at 9:23
yea but how to do that dynamicalls... I have to expand the array each time new checkbox has been checked, and update the array if the unchecked item already exists in the array lol... Can you reply in a form of answer so I can see what you mean ? — perkes456
– perkes456, Commented Jun 8, 2016 at 9:25

phreakv6 · Accepted Answer · 2016-06-08 09:22:59Z

1

I think this might work.

var checkbox_events = [];
brandContainer.on('change', '.check-brand', function() {
    if($(this).is(':checked') {
        checkbox_events[$(this).val()] = 'checked';
    } else {
        checkbox_events[$(this).val()] = 'unchecked';
    }
});

edited Jun 8, 2016 at 9:22

answered Jun 8, 2016 at 9:17

phreakv6

2,1651 gold badge11 silver badges11 bronze badges

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

8 Comments

Shoaib Ijaz Over a year ago

It will be generate following output: ["checked", 1]

perkes456 Over a year ago

When the same checkbox is unchecked I shouldn't add the new value into the array, but simply update the current one... Also every checkbox should be treated like an array for itself... Do you understand what I'm trying to say ? :)

phreakv6 Over a year ago

I have updated my answer. I think what you want is an array that has the states of all checkboxes. If there is a state present, it is to be 'updated'. I think my updated answer should work if I understand you right.

perkes456 Over a year ago

This is exactly what I wanted !!! :) How can I access the value if these ID's now ? I'm guessing I'd usually do a for loop and do like this: checkbox_events[i]['somevalue'] or ??

phreakv6 Over a year ago

Awesome. You can use $(checkbox_events).each(function(index,value) {});. index will have the checkbox key and value will have checked/unchecked. Please accept my answer if it helped you.

|

Collectives™ on Stack Overflow

On checkbox click storing value into an array

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related