Check All не будет работать в Chrome, но работает в Firefox

Question

У меня есть флажок «Проверить все», в котором, когда пользователь отметит его, будут отмечены все элементы под ним. Он отлично работает в Firefox, но не выполняет функцию «Проверить все» в Chrome.

Это функция JS:

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

Для меня и Firefox, и Chromium вылетали на «document.myform.Product A». Вот ваш код, немного модифицированный для работы:

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";
    }
}

и 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>

Но вы можете сделать более чистый код, чтобы сделать то же самое:

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;
}

и 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>

Было бы еще лучше, если бы вы использовали библиотеку с селекторами CSS, такими как jQuery.