Javascript count checked checkbox

Question

I know that may have a few similar questions @stackoverflow, but I didnt found any solution to my problem yet :s

<?php
while($rowVideo = mysql_fetch_array($ResultQueryVideo))
{
?>
<input type="checkbox" name = "checkbox-1[]" class="checkbox" value ="<?php echo $rowVideo['idVideo'] ?>" /> <?php....some code...

This results a few checkbox's, the same number as idVideo..thats the point.

Now, before the submit, I need to be sure that at least one checkbox is checked. But i was not sucesseful :x

function isCountCheck (helperMsg) {
    var chkCnt = 0;
    var Frm = document.forms[0];
    var dLen = Frm.length - 1;
    for (i=0;i<=dLen;i++) {
        if(document.form1.["checkbox-1[]"].checked) chkCnt++;
    }

    if (chkCnt>0) {
        return true;
    } else {
        alert(helperMsg);
        return false;
    }
}

Extra details: form name = "form1"

Can you guide me a litle ? Thanks

EDIT:

function isCountCheck(){
    if($("input[type=checkbox]:checked").length > 0)
    {
    return true;
    }
    else
    {
    alert('Invalid');
    return false;
    }
}

But still not working..even that alert is shown..

The code from your update uses jQuery - have you included the jquery.js library in your page? — nnnnnn
– nnnnnn, Commented Aug 7, 2012 at 4:15

nnnnnn · Accepted Answer · 2012-08-07 04:22:18Z

3

The main problem is that you're not using the i index within the loop to reference the individual checkboxes, and you've got a . just before the [ which is a syntax error. So change:

if(document.form1.["checkbox-1[]"].checked) chkCnt++;

To:

if(document.form1["checkbox-1[]"][i].checked) chkCnt++;

But you can neaten up the function somewhat as follows:

function isCountCheck(helperMsg) {
    var i, dLen = document.form1["checkbox-1[]"].length;
    // if the length property is undefined there is only one checkbox
    if (typeof dLen === "undefined") {
        if (document.form1["checkbox-1[]"].checked) return true;
    }
    else {
        for (i = 0; i < dLen; i++) {
            if (document.form1["checkbox-1[]"][i].checked) return true;
        }
    }
    alert(helperMsg);
    return false;
}

Demo: http://jsfiddle.net/nnnnnn/ZjK3w/1/

Or just loop through all inputs in the form, checking the type (and/or the name) of each one:

function isCountCheck(helperMsg) {
    var i, len, inputs = document.form1.getElementsByTagName("input");
    for (i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type === "checkbox"
            && inputs[i].checked)
            return true;
    }
    alert(helperMsg);
    return false;
}

Demo: http://jsfiddle.net/nnnnnn/ZjK3w/2/

edited Aug 7, 2012 at 4:22

answered Aug 7, 2012 at 3:43

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

5 Comments

user1148875 Over a year ago

the thing is, I have only one <input type="checkbox"> and because of while, it may appear 3 ou 5 our more checkbox, depends of number of idVideo rows I got.

user1148875 Over a year ago

Like this: IF I have 3 Videos - 3 checkbox appear. IF I have 1 video - just 1 checkbx is show. And that is working fine. So i cant solve my problem the way You suggest. Thanks anyway

user1148875 Over a year ago

Hi, I think it may worked :) Thanks. And thanks stackoverflow!

user5175034 Over a year ago

From an old-time but long retired programmer, I'm trying to count checks too so I hope not too stupid a question. Where is the function actually being called? In the form? In each checkbox?

nnnnnn Over a year ago

@DonP - The OP doesn't say exactly where they call the function from, but I assume probably from an on submit handler given they want to validate before submission. In my little jsfiddle demos I called it from a click handler on a button.

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

3

Simplest solution:

var form = document.forms[0]; // your form element (whatever)
var checkedElms = form.querySelectorAll(':checked').length;

No need for jQuery. Supported down to IE8. use polyfill for older browsers if you wish.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 24, 2014 at 21:20

vsync

133k61 gold badges345 silver badges430 bronze badges

Comments

N. Taylor Mullen · Accepted Answer · 2012-08-07 03:16:33Z

0

Use Jquery:

function isCountCheck(helperMsg){
    if($("input[type=checkbox]:checked").length > 0)
        return true;
    alert(helperMsg);
    return false;
}

answered Aug 7, 2012 at 3:16

N. Taylor Mullen

18.3k6 gold badges51 silver badges73 bronze badges

1 Comment

N. Taylor Mullen Over a year ago

It works dont worry =). You must have forgotten to include the JQuery library in your demo. I added my function above to your JSFiddlle: jsfiddle.net/cHxFJ/1

Collectives™ on Stack Overflow

Javascript count checked checkbox

3 Answers 3

5 Comments

Simplest solution:

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Simplest solution:

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related