HTML Tableau de Contrôle en JavaScript - Case tableau 1 retourne la longueur zéro

Je suis à l'aide d'un tableau de contrôle de cases à cocher pour la capture d'une sélection multiple

Le code suivant, avec deux cases à cocher, fonctionne bien et renvoie une valeur de 2 comme prévu (ou cependant beaucoup sont là).

Cependant si il y a une seule case de l'élément dans le tableau, il renvoie une longueur de 0 (zéro).... pourquoi est-ce? Ne faut-il pas revenir à une longueur de 1?

J'ai essayé ceci dans Internet Explorer et google Chrome avec les mêmes résultats. Comme je suis d'avoir à inclure un caché faux case à cocher dans le tableau pour s'assurer qu'il ya toujours deux éléments ou plus lorsque j'exécute le 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 qui renvoie 0 (zéro) longueur...

<form name="searchForm" action="">
     <input type="checkbox" name="categorySelect[]" id="1" onclick="categoryOnClick();"/>
</form>
Utilisation document.getElementsByName pour obtenir de l'élément de name attribut + vous voulez obtenir les coché des cases à cocher? donc, vous devriez vérifier la checked attribut trop, voir ma réponse 🙂
un id ne peut pas être numérique!

OriginalL'auteur Patrick | 2013-06-20

  1. 5

    Travail jsFiddle Démo

    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);
}
    C'est fou le code et ça fonctionne, est-ce un bug avec les tableaux? il n'a pas répondu à ma question, mais je peux certainement utiliser le code pour l'instant. Pourquoi les lignes.longueur de travail dans votre exemple encore selectedRows.la longueur n'est pas dans la mienne (je ne suis pas intéressé dans lequel les cases à cocher sont sélectionnées pour le moment)
    Par exemple, je veux dire quelque chose comme ceci if (selectedRows.length > 0) doSomething(); où je suis en train de regarder le nombre total de cases à cocher dans le tableau, et pas seulement les éléments cochés
    Dans le code ci-dessus, je donne la case cochée longueur, cependant vous pouvez utiliser rows.length car il vous permet d'obtenir le nombre total de cases à cocher, voir ce violon.
    merci beaucoup apprécié... encore à me gratter la tête sur les différentes dans la syntaxe de document.getElementsByName et document.searchForm.les éléments[]
    est un tableau qui contient tous les éléments de formulaire, je pense que vous l'utilisez dans un mauvais chemin, voir ce violon ce article.

    OriginalL'auteur

  2. 1

    En javascript que vous pouvez faire

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

    et en jquery :

    function categoryOnClick() {           
    alert($('input:checked').length)
}

    Espère que ça aide

    OriginalL'auteur Rachit Doshi

  3. 0

    Vous pouvez le faire à l'aide de jQuery:

    function categoryOnClickjQuery() {
    var selectedRows = $('form input').attr('name', 'categorySelect[]');
    alert(selectedRows.length);
}

    OriginalL'auteur derHofbauer