Maison > Article > interface Web > Comment tout sélectionner en javascript

Comment tout sélectionner en javascript

王林original: 2023-05-16 09:04:37719parcourir

La fonction JavaScript Sélectionner tout est très courante dans le développement front-end Web. Elle permet aux utilisateurs de sélectionner facilement toutes les options à la fois, améliorant ainsi l'interactivité des pages et l'expérience utilisateur. Apprenons comment implémenter la fonction JavaScript Select All.

Tout d'abord, nous devons ajouter une case à cocher Tout sélectionner et quelques cases à cocher qui doivent être cochées dans le HTML. Voici un exemple de code HTML :

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript全选示例</title>
    <script type="text/javascript">
        function selectAll(){
            //TODO:实现全选功能
        }
    </script>
</head>
<body>
    <h3>请选择以下商品</h3>
    <input type="checkbox" id="all" onclick="selectAll()">全选
    <br>
    <input type="checkbox" name="goods[]" value="商品1">商品1
    <input type="checkbox" name="goods[]" value="商品2">商品2
    <input type="checkbox" name="goods[]" value="商品3">商品3
    <input type="checkbox" name="goods[]" value="商品4">商品4
    <input type="checkbox" name="goods[]" value="商品5">商品5
</body>
</html>

Dans ce code HTML, nous pouvons voir une case à cocher Tout sélectionner et plusieurs cases à cocher de produits. Ensuite, nous devons implémenter la fonction select all.

Nous pouvons utiliser l'objet élément DOM dans la fonction JavaScript pour obtenir toutes les cases à cocher qui doivent être cochées, puis définir leur attribut vérifié sur true (coché). L'exemple de code est le suivant :

function selectAll(){
    var checkboxes = document.getElementsByName('goods[]');
    var allCheckbox = document.getElementById('all');
    for(var i=0; i<checkboxes.length; i++){
        checkboxes[i].checked = allCheckbox.checked;
    }
}

Dans ce code JavaScript, nous utilisons deux objets éléments DOM : document.getElementsByName('goods[]') et document.getElementById('all' ). Parmi eux, la fonction document.getElementsByName('goods[]') renvoie un objet NodeList, qui contient tous les éléments de case à cocher dont l'attribut name est "goods[]". document.getElementById('all') renvoie l'objet élément avec l'attribut id "all". Ensuite, nous parcourons toutes les cases à cocher qui doivent être sélectionnées et définissons leur attribut coché sur l'attribut coché de la case à cocher tout sélectionner, réalisant ainsi la fonction tout sélectionner. document.getElementsByName('goods[]')和document.getElementById('all')。其中，document.getElementsByName('goods[]')函数返回一个NodeList对象，包含了所有name属性为“goods[]” 的复选框元素。document.getElementById('all')则返回了id属性为“all”的元素对象。接下来，我们遍历所有需要选中的复选框，并将它们的checked属性设置为全选复选框的checked属性，从而实现了全选功能。

最后，我们需要在HTML代码中调用selectAll()函数，以便用户单击全选复选框后触发JavaScript代码。我们将selectAll()函数绑定在d5fd7aea971a85678ba271703566ebfd

Enfin, nous devons appeler la fonction selectAll() dans le code HTML afin que le code JavaScript soit déclenché une fois que l'utilisateur a cliqué sur la case à cocher tout sélectionner. Nous lions la fonction selectAll() à l'événement onclick de l'élément d5fd7aea971a85678ba271703566ebfd, comme indiqué ci-dessous :

<input type="checkbox" id="all" onclick="selectAll()">全选

À ce stade, nous avons terminé la sélection JavaScript de tous. Réalisation fonctionnelle. Exécutez le code HTML et essayez de cocher la case Sélectionner tout pour voir si vous pouvez tout sélectionner.

Pour résumer, pour implémenter la fonction de sélection de tout JavaScript, nous devons ajouter la case à cocher de sélection de tout et les cases à cocher qui doivent être cochées en HTML, et utiliser le code JavaScript pour définir l'attribut coché de toutes les cases à cocher qui doivent être sélectionné pour tous. Attribut coché de la case à cocher. De cette façon, la fonction JavaScript Select All peut être implémentée. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 对象事件 dom input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：javascript désactiver le sautArticle suivant：javascript désactiver le saut

Articles Liés

Voir plus