HTML Control Array in JavaScript - Checkbox array of 1 returns zero length

Question

I'm using a control array of checkboxes to capture a multiple selection

The following code, with two checkboxes, works well and returns a value of 2 as expected (or however many are there).

However if there is only one checkbox item in the array, it returns a length of 0 (zero).... why is this? Shouldn't it return a length of 1?

I have tried this in Internet Explorer and Chrome with the same results. As a work around I am having to include a hidden bogus checkbox in the array to make sure there is always two or more items when I run the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function categoryOnClick() {
            var selectedRows = document.searchForm.elements['categorySelect[]'];
            alert(selectedRows.length);
        }
    </script>
</head>
<body>
    <form name="searchForm" action="">
        <input type="checkbox" name="categorySelect[]" id="1" onclick="categoryOnClick();"/>
        <input type="checkbox" name="categorySelect[]" id="2" onclick="categoryOnClick();"/>
    </form>
</body>
</html>

Code that returns 0 (zero) length...

<form name="searchForm" action="">
     <input type="checkbox" name="categorySelect[]" id="1" onclick="categoryOnClick();"/>
</form>

Use document.getElementsByName to get element by name attribute + you want to get the checked checkboxes? so you should check the checked attribute too, see my answer :) — user1823761
– user1823761, Commented Jun 20, 2013 at 12:07

user1823761user1823761 · Accepted Answer · 2013-06-20 12:02:02Z

5

Working jsFiddle Demo

function categoryOnClick() {
    var rows = document.getElementsByName('categorySelect[]');
    var selectedRows = [];
    for (var i = 0, l = rows.length; i < l; i++) {
        if (rows[i].checked) {
            selectedRows.push(rows[i]);
        }
    }

    alert(selectedRows.length);
}

answered Jun 20, 2013 at 12:02

user1823761

That's crazy code and it works - is this a bug with arrays? it doesn't answer my question but I can certainly use the code for now. Why does rows.length work in your example yet selectedRows.length does not in mine (I'm not interested in which checkboxes are selected at the moment)

Patrick
– Patrick

06/20/2013 12:11:08
Commented Jun 20, 2013 at 12:11
For instance I want to say something like this if (selectedRows.length > 0) doSomething(); where I am looking at the total number of checkboxes in the array not just checked items

Patrick
– Patrick

06/20/2013 12:18:23
Commented Jun 20, 2013 at 12:18
@Patrick In the above code I give the checked checkbox length, however you can use rows.length as it will get you the total number of checkboxes, see this fiddle.

user1823761
– user1823761

06/20/2013 12:20:37
Commented Jun 20, 2013 at 12:20
thanks much appreciated... still scratching my head over the different in syntax document.getElementsByName and document.searchForm.elements[]

Patrick
– Patrick

06/20/2013 12:31:15
Commented Jun 20, 2013 at 12:31
@Patrick elements is an array which holds all form elements, I think you are using it in a wrong way, see this fiddle and this article.

user1823761
– user1823761

06/20/2013 12:35:39
Commented Jun 20, 2013 at 12:35

Add a comment |

Rachit Doshi · Accepted Answer · 2013-06-20 12:34:44Z

1

In javascript you can do

function categoryOnClick() {
    var count = document.querySelectorAll("input[type=checkbox]").length;
    var checkedElements = 0;
    for (var i = 0; i < count; i++) {
        checkedElements = checkedElements + parseInt((document.querySelectorAll("input[type=checkbox]")[i].checked) ? 1 : 0);    
    }
    alert(checkedElements);
}

and in jquery :

function categoryOnClick() {           
    alert($('input:checked').length)
}

Hope that helps

answered Jun 20, 2013 at 12:34

Rachit Doshi

1831 silver badge6 bronze badges

Add a comment |

derHofbauer · Accepted Answer · 2013-06-20 12:25:42Z

0

You can do this using jQuery:

function categoryOnClickjQuery() {
    var selectedRows = $('form input').attr('name', 'categorySelect[]');
    alert(selectedRows.length);
}

answered Jun 20, 2013 at 12:25

derHofbauer

611 silver badge5 bronze badges

Add a comment |

Collectives™ on Stack Overflow

HTML Control Array in JavaScript - Checkbox array of 1 returns zero length

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related