How to keep a stored array of input checkbox value?

Question

I have a input checkbox that act as a category filter. I want to store only those values of input checkboxes in an array that are checked in a var checkedAttr. Then do a test if any of the already existing values match any in the array and if it does delete it. The problem I'm having is that... when an input checkbox is clicked, it will store it as many times as the $each loop goes or input checkboxes there are, in this case (three times). I also noticed when unchecking more than one, then rechecking the same one, it will add the values as many times as the $each loop goes and will somehow bypass deleting from the array. I just want to simply add (checked values) / delete (unchecked values) from the array every time the user checks or unchecks.

Here's a jsfiddle.

HTML:

<div id="category-list">
     <h1>Categories</h1>
     <input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/>
     <input class="categories" type="checkbox" name="filter" value="Science" checked>Science<br/>
     <input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading
</div>

jQuery:

var checkedAttr = []; // array for checked attributes
// change event listener for whenever one or more of the following checkboxes have been checked/unchecked
$('#category-list :checkbox').change(function() 
{
    var value = $(this).val();
    if($(this).is(':checked')) // checked
    {
        console.log(value + ' is now checked!!!!!!!!!!!!!!!!!!!!!!!!');

        $('#category-list :checkbox').each(function(i, item){ // loop thru the input checkboxes
            if(!(value === $(item).val())) // check if the current value does NOT match that already stored in array
            {
                checkedAttr.push(value); // add value to array
                console.log("checkedAttr:", checkedAttr);
            }
            else // if it does match...
            {
                checkedAttr.splice(i, 1);// remove it from array  
                console.log("checkedAttr:", checkedAttr);
            }
        });

        // check which attributes are checked and store in 'checkedAttr' array
        //$('input[name=filter]').each(function(i, item){

        //});
    } 
    else // unchecked
    {
        console.log(value + ' is now unchecked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
    }
});

Asfandiyar Khan · Accepted Answer · 2018-05-15 19:44:30Z

1

Check it Brother its working as you want

var checkedAttr = [];

$('#category-list :checkbox').change(function() 
{
    checkedAttr = [];
    $('#category-list :checkbox').each(function(i, item){
        if($(item).is(':checked'))
        {
            checkedAttr.push($(item).val()); 
        }
    });
   console.log("checkedAttr:", checkedAttr);
});

You can also check it in JSFiddle

https://jsfiddle.net/xdrLra77/

edited May 15, 2018 at 19:44

answered Mar 14, 2016 at 20:10

Asfandiyar Khan

848 bronze badges

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

2 Comments

TheAmazingKnight Over a year ago

Works Perfectly! Thank you!

Luan Soares Over a year ago

Redundance of loop each time the checkbox change. Just make one on the beginning and continue just with validations

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can do it simply with a mapcall

var checkedAttr = [];
    
$('#category-list :checkbox').change(function() {
    checkedAttr = $('#category-list :checked').map(function(){
        return $(this).val();
    }).get();
    
    console.log(checkedAttr);
});

(Updated jFiddle)

(Edit: better yet, put the condition in the jQuery selector)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 14, 2016 at 19:53

alepeino

9,8113 gold badges32 silver badges48 bronze badges

7 Comments

Mottie Over a year ago

Actually, don't use a conditional return, you should always return a value, true or false.

alepeino Over a year ago

@Mottie by returning false won't the false value end up in the resulting array?

Mottie Over a year ago

Yes, but what good is the resulting array if you can't tell what the second true is in regard to?

alepeino Over a year ago

@Mottie which second true? I did a jFiddle with what I understand is OP's intended functionality.

alepeino Over a year ago

@TheAmazingKnight Sure. First, map is not a jQuery thing, it's commonly implemented in most languages, and is typical within the functional programming paradigm. In its typical form, it takes as arguments an array (or some iterable) and a function. It then applies the function to each element of the array, generating a new array with the result of the operation on each element. Here, the operation is just extracting the val(), and the collection on which we operate is the selection of checked checkboxes.

|

Luan Soares · Accepted Answer · 2016-03-14 20:50:07Z

1

Edited

var checkedAttr = []; // array for checked attributes

//first load, see what is checked
$('#category-list :checkbox').each(function(){
 if($(this).is(':checked')) // checked
 checkedAttr.push($(this).val())
})


// change event listener for whenever one or more of the following     checkboxes have been checked/unchecked
$('#category-list :checkbox').change(function() 
{
var value = $(this).val();
var position = checkedAttr.indexOf($(this).val());

if($(this).is(':checked')) // checked
{
    if(position == -1){ // dnot exist in array, add
        checkedAttr.push($(this).val());
      console.log("checkedAttr:", checkedAttr);
    }else{ // exist in array, do nothing
        //do nothing
   }
   console.log(value + ' is now checked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
} 
else // unchecked
{
    if(position == -1){ // dont exist in array, do nothing
        //do nothing
    }else{ // exist in array, remove
        checkedAttr.splice(position,1);
        console.log("checkedAttr:", checkedAttr);
    }

    console.log(value + ' is now unchecked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
}
});

edited Mar 14, 2016 at 20:50

answered Mar 14, 2016 at 19:52

Luan Soares

3102 silver badges6 bronze badges

2 Comments

TheAmazingKnight Over a year ago

This works, but on initial load, checkedAttr is empty then stores values after checking them all.

Luan Soares Over a year ago

@TheAmazingKnight edited, only one extra loop in the beginning

Programmer2.0 · Accepted Answer · 2016-03-14 20:08:56Z

0

You can get the checked elements by using $('.categories:checked'). Then you may iterate through those values to get the actual values

var checkedValues= $('.categories:checked');

var valuesArray=[];
$.each(checkedValues, function(checkedValue){
valuesArray.push(checkedValue.value)
}

edited Mar 14, 2016 at 20:08

answered Mar 14, 2016 at 20:03

Programmer2.0

541 silver badge10 bronze badges

2 Comments

Mottie Over a year ago

Why give an answer that uses underscore when the question isn't tagged with it?

Programmer2.0 Over a year ago

My bad. Its very similar to jQuery anyways. Updated my answer

dewd · Accepted Answer · 2016-03-14 20:20:42Z

0

Use $.inArray:

if (index === -1  && $(this).is(':checked')) {

    checkedAttr.push(value); // add value to array
    console.log("added:", checkedAttr);

 } else if (index !== -1 && ! $(this).is(':checked')) {

    checkedAttr.splice(index, 1);// remove it from array                
    console.log("removed:", checkedAttr);

}

Amended fiddle: https://jsfiddle.net/o1rmz1o1/4/

edited Mar 14, 2016 at 20:20

answered Mar 14, 2016 at 19:52

dewd

4,4334 gold badges35 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to keep a stored array of input checkbox value?

5 Answers 5

2 Comments

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related