Question

I have a Check All box wherein when the user will tick it, all the items under it will be ticked. It works fine in Firefox but won’t perform the Check All function in chrome.

This is the JS function:

function Check(chk, num)   
{   
    if(chk.value=="Check all"){   
        for (i = 0; i <= num; i++){   
            chk[i].checked = true ;   
        }
        chk.value="UnCheck all";   
    }else{

        for (i = 0; i <= num; i++){
            chk[i].checked = false ;
        }
        chk.value="Check all";
    }
}

HTML:

<form target="_blank" action="" method="post" id="myform" name="myform"> 
    <input type="checkbox" value="Check all" onclick="Check(document.myform.Product A, 9)" id="Fujitsu" name="Fujitsu"> Select All 
    <input type="hidden" value="1" name="product_id[1]"> 
    <input type="checkbox" value="Product 1" id="Product 1" name="product[1]">Product A -Product 1 
    <input type="hidden" value="2" name="product_id[2]"> 
    <input type="checkbox" value="Product 2" id="Product 2" name="product[1]">Product A -Product 2 
</form>

Answer 1

For me both Firefox and Chromium crash on “document.myform.Product A”. Here is your code a little modified to work:

function Check(form, all, chk, num)
{
    if(form[all].value=="Check all"){
        for (i = 1; i <= num; i++){
            form[chk + i].checked = true ;
        }
        form[all].value="UnCheck all";
    }else{

        for (i = 1; i <= num; i++){
            form[chk + i].checked = false ;
        }
        form[all].value="Check all";
    }
}

and HTML:

<form target="_blank" action="" method="post" id="myform" name="myform">-
    <input type="checkbox" value="Check all" onclick="Check(document.myform, 'Fujitsu',  'Product_' , 2)" id="Fujitsu" name="Fujitsu"> Select All-
    <input type="hidden" value="1" name="product_id[1]">-
    <input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
    <input type="hidden" value="2" name="product_id[2]">-
    <input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>

But you can do cleaner code to do the same thing:

function Check(form, action)
{
    var l = form.getElementsByTagName("input");
    for (var i = 0; i < l.length; ++i)
        if (l[i].type == "checkbox") l[i].checked = action;
}

and HTML:

<form target="_blank" action="" method="post" id="myform" name="myform">-
    <input type="checkbox" value="Check all" onclick="Check(document.myform, this.checked)" id="Fujitsu" name="Fujitsu"> Select All-
    <input type="hidden" value="1" name="product_id[1]">-
    <input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
    <input type="hidden" value="2" name="product_id[2]">-
    <input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>

It would be even better if you used a library with CSS selectors like jQuery.