array checkbox.checked javascript not working

Question

<form id="form1" name="form_check" method="post" action="">
<p align="center">
<input type="checkbox" name="role[]" value="1">
<input type="checkbox" name="role[]" value="2">
<input type="checkbox" name="role[]" value="3"></p> 
<input type="submit" name="Submit" onclick="check_all()">
<script>
function check_all(){
    checkedBox="x"
    for(var i=0;i<document.getElementsByName('role[]').length;i++){
        if(document.getElementsByName('role[i]').checked == true){
            checkedBox="y"
            break // No need to check the rest since only one can be checked.
        }
    }
    if(checkBox == "x"){
        alert("Checkbox not checked")
    }
}
</script>

I have written the code above to check is the checkboxes are checked. It doesn't execute the if statement in the JavaScript area. I am unable to get a output. in JSfiddle when iam trying to execute this script i get this error :

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x22c58d0>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x25563d0>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x22c58d0>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x2556cd0>, 'help_text': '', 'name': 'js_wrap'}"}

This script worked for me:

var radios = document.getElementsByName('role[]');

checkedBox = "x";
for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        //alert("checked: " + radios[i].value);
        checkedBox = "y";
        break; // No need to check the rest since only one can be checked.
    }
}

"// No need to check the rest since only one can be checked" - if that's the case why aren't you using radio buttons? — Popnoodles
– Popnoodles, Commented Jun 19, 2014 at 18:27
i wanted to check if users have checked atleast one checkbox from the multiple once.. — harry
– harry, Commented Jun 19, 2014 at 18:52

T J · Accepted Answer · 2014-06-19 19:59:43Z

2

You've declared a variable checkedBox but in the if condition you're using checkBox
document.getElementsByName('role[i]') will be null since there's no matching element. (document.getElementsByName('role[' + i + ']') will be also be null for the same reason.)

What you actually need to use is

document.getElementsByName('role[]')[i].checked.

But accessing the DOM in loops like this is not a good practice, it's better to store the htmlCollection in a variable.

So after all your code should look like

function check_all() {
 checkedBox = "x";
 var checkboxes = document.getElementsByName('role[]');
 for (var i = 0; i < checkboxes.length; i++) {
    if ( checkboxes[i].checked) {
        checkedBox = "y"
        break // No need to check the rest since only one can be checked.
    }
 }
 if (checkedBox == "x") {
    alert("Checkbox not checked");
    return false;
 }
}

JSFiddle

Side notes:

IMHO, it's a good practice to use boolean values for flags for better readability understandability than x, y etc...
You aren't closing the <form> tag in the shared code...

edited Jun 19, 2014 at 19:59

answered Jun 19, 2014 at 19:53

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

1 Comment

harry Over a year ago

thanks @Tilwin Joy you script worked for me with javascript, i have pasted above..

Laoujin · Accepted Answer · 2014-06-19 18:25:40Z

1

I think you'll want the i not be a literal i:

if(document.getElementsByName('role[' + i + ']').checked == true){

You can always use console.log as a debugging aid to find these kinds of errors.

answered Jun 19, 2014 at 18:25

Laoujin

10.3k7 gold badges45 silver badges72 bronze badges

1 Comment

harry Over a year ago

thanks, now its executing the if loop but not going inside. showing as not check when i have already checked checkboxes.

Collectives™ on Stack Overflow

array checkbox.checked javascript not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related