Décochez toutes les cases jquery-Questions et réponses frontales-php.cn

Décochez toutes les cases jquery

WBOY

Libérer： 2023-05-25 10:16:37

original

532 Les gens l'ont consulté

Décochez toutes les cases jQuery

Dans le développement de pages Web, les cases à cocher sont souvent utilisées. La fonction des cases à cocher est de permettre aux utilisateurs de sélectionner une ou plusieurs options. Normalement, nous fournirons un bouton « Sélectionner tout » afin que les utilisateurs puissent sélectionner toutes les options en même temps, mais parfois, nous devons également fournir un bouton « Désélectionner tout » afin que les utilisateurs puissent annuler toutes les options en même temps.

Dans cet article, nous présenterons comment utiliser jQuery pour implémenter la fonction de désélection de toutes les cases.

Code HTML

Jetons d'abord un coup d'œil au code HTML, qui contient trois cases à cocher et deux boutons : tout sélectionner et tout désélectionner.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery复选框全不选</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h2>请选择你喜欢的水果：</h2>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="orange">橙子<br>
    <br>
    <button id="btnCheckAll">全选</button>
    <button id="btnCheckNone">全不选</button>
</body>
</html>

Copier après la connexion

code jQuery

Ensuite, nous utilisons jQuery pour compléter la fonction de désélection. Tout d'abord, nous devons obtenir toutes les cases à cocher, puis parcourir ces cases à cocher et définir leur attribut "checked" sur false à leur tour.

$(function(){
    $("#btnCheckNone").click(function(){
        $("input[type='checkbox']").each(function(){
            $(this).prop("checked", false);
        });
    });
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord le sélecteur jQuery pour obtenir toutes les cases à cocher, puis utilisons la méthode "each" pour parcourir ces cases à cocher. Pendant le processus de parcours, nous utilisons la méthode "prop" pour définir leur attribut "checked" sur false, afin que la fonction de ne pas tout sélectionner puisse être réalisée.

Résumé

Cet article explique comment utiliser jQuery pour réaliser la fonction de désélection des cases à cocher. En définissant l'attribut « coché » de toutes les cases à cocher sur false, nous pouvons annuler toutes les options en même temps, offrant ainsi une expérience utilisateur plus pratique. Le code est simple et facile à comprendre et peut être facilement appliqué au développement réel.

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!