get value of checked checkbox list in array in jQuery

Question

I have list of checkboxes that has all checkbox pre-checked when page load.

Firstly, I want to read all checkboxes (checked) value and store in global array.

Later, whenever any checkbox is clicked by user (un-checked / checked), I want to update the array with values of only checked checkboxes.

All this i want to do in jQuery.

thanks

I'm not sure why you'd want to pull this into an array, you have an array of controls... it's effectively there already, no need to duplicate the effort. — Lazarus
– Lazarus, Commented Mar 2, 2012 at 12:14

Vitalii Maslianok · Accepted Answer · 2012-03-02 12:31:28Z

4

<input type="checkbox" value="somevalue1" class="chk">
<input type="checkbox" value="somevalue2" class="chk">
<input type="checkbox" value="somevalue3" class="chk">
<input type="checkbox" value="somevalue4" class="chk">
<input type="checkbox" value="somevalue5" class="chk">
<script>
var someGlobalArray = new Array;

$(".chk").click(function() {
    someGlobalArray=[];
    $('.chk:checked').each(function() {
        someGlobalArray.push($(this).val());
    });
    console.log(someGlobalArray);
});
</script>

answered Mar 2, 2012 at 12:31

Vitalii Maslianok

1,6311 gold badge14 silver badges16 bronze badges

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

3 Comments

Wikki Over a year ago

this is fine, how do i do updating when checkbox is checked again.

Wikki Over a year ago

i have this function function updateCategoryList() { //g_categoryList = []; $('.g_chkCat:checked').each(function() { g_categoryList.push($(this).val()); }); //$('#t').val(categoryList); alert("Length: "+g_categoryList.length +" Values: "+g_categoryList); } how to i link click on check box to call this function again

Vitalii Maslianok Over a year ago

$(".g_chkCat").click(function() { g_categoryList = []; $('.g_chkCat:checked').each(function() { g_categoryList.push($(this).val()); }); //$('#t').val(categoryList); alert("Length: "+g_categoryList.length +" Values: "+g_categoryList); }

He Nrik · Accepted Answer · 2012-10-31 16:43:44Z

2

Did you mean something like this?

var arrCheckboxes;
var checkboxSelector = "input[type='checkbox']";
$("body").delegate(checkboxSelector , "click", function(){
    arrCheckboxes = $(checkboxSelector).map(function() {
        return this.checked;
    }).get();
});

(Maybe you should change the $("body") to a more precise container)

If you want an array with objects with name (...or id or maybe the element)... you can do something like this:

var arrCheckboxes;
var checkboxSelector = "input[type='checkbox']";
$("body").delegate(checkboxSelector , "change", function(){
    arrCheckboxes = $(checkboxSelector).map(function() {
        return { name: this.name, val: this.checked };
    }).get();
});

edited Oct 31, 2012 at 16:43

answered Mar 2, 2012 at 12:21

He Nrik

1,71016 silver badges17 bronze badges

2 Comments

Wikki Over a year ago

i have these checkboxes ul>li>input

He Nrik Over a year ago

$("ul").delegate(... Add a class to the ul and your selector if you have multiple lists on your page. When you click the checkbox it will bubble up to the container (in this case <ul>). This way you can bind one event instead of one per checkbox.

Alnitak · Accepted Answer · 2012-03-02 12:17:36Z

0

I assume that you want is the name or id of the checked items, since checkbox values are boolean?

var checked = {};
$(':input[type="checkbox"]').each(function() {
    var name= this.name;
    var val = this.checked;
    if (val) {
        checked[name] = val;
    }
}).on('change', function() {
    var name = this.name;
    var val = this.checked;
    if (val) {
        checked[name] = val;
    } else {
        delete checked[name];
    }
});

The object checked will then contain keys, and only those corresponding to checked items will appear in that object.

Working demo at http://jsfiddle.net/tFYPF/

answered Mar 2, 2012 at 12:17

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Collectives™ on Stack Overflow

get value of checked checkbox list in array in jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related