Looping through checkboxes with javascript

Question

I have a number of checkboxes which I am wanting to check if they are checked (1) or not checked (0). I want to place the results in an array so that I can send them to the server to saved in a table. I have tried the below code:

<input class="publish" id="chkBox1" type="checkbox" checked>
<input class="publish" id="chkBox2" type="checkbox" checked>
<input class="publish" id="chkBox3" type="checkbox" checked>
<input class="publish" id="chkBox4" type="checkbox" checked>
<input class="publish" id="chkBox5" type="checkbox" checked>

<script>
$('#save-btn').click(function(evt){
    evt.preventDefault();

    var numberOfChBox = $('.publish').length;
    var checkArray = new Array(); 

    for(i = 1; i <= numberOfChBox; i++) {

        if($('#chkBox' + i).is(':checked')) {
            checkArray[i] = 1;  
        } else {
        checkArray[i] = 0;
        }
    }
    alert(checkArray);
});
</script>

but the alert outputs this:

,1,0,1,0,1,1

The values are correct except the first index in undefined. There are only a total of 5 checkboxes and yet the array is 6 indexes long. Why is this?

Tats_innit · Accepted Answer · 2014-04-26 07:20:30Z

6

Try this efficient way bruvo :) http://jsfiddle.net/v4dxu/ with proper end tag in html: http://jsfiddle.net/L4p5r/

Pretty good link: https://learn.jquery.com/javascript-101/arrays/

Also in your html end your tag /> i.e.

<input class="publish" id="chkBox4" type="checkbox" checked>

rest should help :)

Code

var checkArray = new Array(); 
$('input[type=checkbox]').each(function () {
    this.checked ? checkArray.push("1") : checkArray.push("0");
});

alert(checkArray);

edited Apr 26, 2014 at 7:20

answered Apr 26, 2014 at 7:14

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

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

Comments

Selvaraj M A · Accepted Answer · 2014-04-26 07:19:24Z

4

As mentioned in the answers above the problem is with the index(i). But if you want to simplify the code further, How about the following code?

var checkArray = [];

$('input.publish').each(function () {
   checkArray.push($(this).is(':checked'));
});

alert(checkArray);

edited Apr 26, 2014 at 7:19

answered Apr 26, 2014 at 7:14

Selvaraj M A

3,1363 gold badges32 silver badges47 bronze badges

1 Comment

Tats_innit Over a year ago

+ 1 yes this is legit! :)

Govind Singh · Accepted Answer · 2014-04-26 07:13:54Z

3

Take into account that the first element you write is checkArray[1], as i starts with 1, instead of checkArray[0].

Replace checkArray[i] with checkArray[i-1] inside the for bucle

edited Apr 26, 2014 at 7:13

Govind Singh

15.5k14 gold badges77 silver badges108 bronze badges

answered Apr 26, 2014 at 7:10

Alfonso Jiménez

1,2451 gold badge13 silver badges25 bronze badges

1 Comment

Rajaprabhu Aravindasamy Over a year ago

That's ok but how did the array fill with 6 elements..? totally there are 5 checkboxes right..?

Collectives™ on Stack Overflow

Looping through checkboxes with javascript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related