Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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>
share|improve this question
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 Jun 20 at 12:07
an id can not be numeric! – Waqar Alamgir Jun 20 at 12:12

3 Answers

up vote 0 down vote accepted

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);
}
share|improve this answer
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 Jun 20 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 Jun 20 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 Jun 20 at 12:20
thanks much appreciated... still scratching my head over the different in syntax document.getElementsByName and document.searchForm.elements[] – Patrick Jun 20 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 Jun 20 at 12:35
up vote 0 down vote

You can do this using jQuery:

function categoryOnClickjQuery() {
    var selectedRows = $('form input').attr('name', 'categorySelect[]');
    alert(selectedRows.length);
}
share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.