Ce didacticiel explique comment utiliser jQuery pour identifier et extraire avec précision le texte d'étiquette associé à toutes les cases non cochées sur la page. En combinant le sélecteur :not(:checked) et la méthode de traversée DOM next('label'), nous apprendrons comment collecter ces textes d'étiquettes dans un tableau, jetant les bases de la soumission ultérieure du formulaire ou du traitement des données, garantissant l'exactitude et l'exhaustivité des données.

1. Comprendre les exigences?: Pourquoi devez-vous collecter des étiquettes dont les cases ne sont pas cochées??

Lors de la création de formulaires interactifs, nous devons souvent collecter des données basées sur les sélections des utilisateurs. En plus des options explicitement sélectionnées par l'utilisateur, la logique métier nous oblige parfois également à enregistrer les options que l'utilisateur ? n'a pas sélectionnées ?. Par exemple, dans un questionnaire, nous devons savoir quelles questions l'utilisateur a ignorées, ou dans une interface de configuration, nous devons enregistrer quelles fonctions par défaut ont été désactivées par l'utilisateur. L'obtention directe du texte de l'étiquette de la case non cochée peut fournir des informations contextuelles plus riches et faciliter un traitement et une analyse de données plus sophistiqués sur le backend.

Une approche traditionnelle pourrait consister à traiter toutes les valeurs de cases à cocher soumises sur le backend, puis à comparer pour savoir lesquelles ne sont pas cochées. Cependant, la collecte directe des balises des éléments non sélectionnés via jQuery front-end peut simplifier la logique back-end et permettre une vérification ou un affichage front-end avant la soumission.

2. Concepts de base?: sélecteur jQuery et traversée du DOM

Pour atteindre cet objectif, nous devons ma?triser deux concepts clés de jQuery?:

• Sélecteur :not(:checked) : Il s'agit d'un sélecteur de pseudo-classe très pratique, utilisé pour faire correspondre tous les éléments de case à cocher (case à cocher) ou de bouton radio (radio) non cochés.
• Méthode next('label') : Cette méthode est utilisée pour trouver l'élément frère suivant correspondant au sélecteur d'étiquette immédiatement à c?té de l'élément actuel (dans ce cas, la case à cocher). Cela nécessite que dans la structure HTML, l'élément label suive immédiatement l'input[type="checkbox"] correspondant.

3. Construire une structure HTML

Pour le démontrer, nous avons d'abord besoin d'une structure HTML contenant plusieurs cases à cocher et leurs étiquettes. Pour faciliter la sélection jQuery, nous ajoutons un nom de classe commun à toutes les cases à cocher, tel que checkbox-item.

 

<t>
    <m charset="UTF-8">
    <title>Obtenir le libellé de la case à cocher non cochée</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        corps { famille de polices?: Arial, sans-serif?; marge : 20px ; }
        .checkbox-group { marge-bas?: 15px?; remplissage?:?10?px?; bordure?: 1px solide #eee?; rayon de bordure?: 5?px?; }
        étiquette {marge-gauche?: 5px?; curseur : pointeur ; }
        bouton { remplissage?: 10px 20px?; couleur d&#39;arrière-plan?: #007bff?; couleur : blanc ; bordure?: aucune?; rayon de bordure?: 4?px?; curseur : pointeur ; }
        bouton?: survol { couleur d&#39;arrière-plan?: #0056b3?; }
        #résultat { margin-top?: 20px?; remplissage?:?10?px?; bordure?: 1px solide #ccc?; couleur d&#39;arrière-plan?: #f9f9f9?; hauteur minimale?: 50?px?; }
    </style>
</m></t>ête>
<corps>

    <h1>Collecter les tags dont les cases ne sont pas cochées</h1>

    <form id="monFormulaire">
        <div class="checkbox-group">
            <input type="checkbox" id="option1" name="options[]" class="checkbox-item" v>
            <label for="option1">Option 1?: Ceci est l'élément sélectionné</label><br>

            <input type="checkbox" id="option2" name="options[]" class="checkbox-item">
            <label for="option2">Option 2?:?Il s'agit d'un élément non sélectionné</label><br>

            <input type="checkbox" id="option3" name="options[]" class="checkbox-item" v>
            <label for="option3">Option 3?: Ceci est un autre élément sélectionné</label><br>

            <input type="checkbox" id="option4" name="options[]" class="checkbox-item">
            <label for="option4">Option 4?: Ceci est un autre élément non coché</label><br>
        </div>

        <button type="submit">Soumettez le formulaire et obtenez les éléments non cochés</button>
    </form>

    <h2>Résultat?:</h2>
    <div id="result"></div>

</corps>

4. écrivez du code jQuery

Nous allons maintenant écrire du code JavaScript pour écouter l'événement de soumission du formulaire et exécuter la logique pour collecter les balises non cochées lorsque l'événement se déclenche.

 $(document).ready(function() {
    // écoutez l'événement de soumission du formulaire $('#myForm').submit(function(event) {
        // Empêche le comportement de soumission par défaut du formulaire afin que nous puissions traiter les données via AJAX ou d'autres méthodes event.preventDefault();

        //Tableau utilisé pour stocker le texte de l'étiquette de la case à cocher non cochée var unCheckedLabelText = [];

        // Parcourez toutes les cases à cocher avec la classe 'checkbox-item' qui ne sont pas cochées $('input.checkbox-item:not(:checked)').each(function() {
            // Récupère le contenu textuel de l'élément 'label' à c?té de la case à cocher actuellement non sélectionnée var text = $(this).next('label').text();
            //Ajoute le texte obtenu au tableau unCheckedLabelText.push(text);
        });

        //Imprime le tableau d'étiquettes collecté sur la console console.log("étiquette de la case à cocher non cochée?:", unCheckedLabelText);

        // Afficher les résultats sur la page var resultDiv = $('#result');
        si (unCheckedLabelText.length > 0) {
            resultDiv.html('<strong>éléments non sélectionnés?:</strong><br>

'); $.each (unCheckedLabelText, fonction (index, élément) { resultDiv.append('
• ' élément '
'); }); resultDiv.append('

'); } autre { resultDiv.html('Tous les éléments ont été sélectionnés !'); } // Dans l'application réelle, vous pouvez envoyer le tableau unCheckedLabelText au serveur backend ici, // Par exemple via requête AJAX : /* $.ajax({ url?: 'your_php_script.php', // Type d'adresse de votre script de traitement backend?: 'POST', données: { unchecked_labels?: unCheckedLabelText // Envoyer le tableau en tant que données}, succès?: fonction (réponse) { console.log('Données envoyées avec succès?:', réponse); //Gérer la réponse du backend}, erreur?: fonction (xhr, statut, erreur) { console.error('échec de l'envoi des données :', erreur); } }); */ }); // Vous pouvez également ajouter une logique de mise à jour en temps réel, comme la mise à jour du tableau à chaque fois que la case est cochée // Mais il est généralement plus courant et plus efficace de collecter des données lorsque le formulaire est soumis /* $('.checkbox-item').click(function() { var currentUnCheckedLabels = []; $('input.checkbox-item:not(:checked)').each(function() { currentUnCheckedLabels.push($(this).next('label').text()); }); console.log("éléments non vérifiés en temps réel?:", currentUnCheckedLabels); // Vous pouvez ici mettre à jour un champ masqué ou afficher le statut en temps réel sur la page}); */ });

5. Analyse des codes

1. $(document).ready(function() { ... }); : Assurez-vous que le DOM est complètement chargé avant d'exécuter du code JavaScript pour éviter les erreurs causées par des éléments non chargés.
2. $('#myForm').submit(function(event) { ... }); : Lier l'événement de soumission du formulaire. Cette fonction sera appelée lorsque l'utilisateur cliquera sur le bouton Soumettre.
3. event.preventDefault(); : C’est une étape clé. Il empêche le comportement de soumission par défaut du formulaire (c'est-à-dire l'actualisation ou le saut de page), ce qui nous permet de contr?ler entièrement le processus de traitement des données via JavaScript.
4. var unCheckedLabelText = []; : initialise un tableau vide pour stocker le texte de l'étiquette de toutes les cases non cochées. Il sera réinitialisé à chaque soumission pour garantir que les données sont à jour.
5. $('input.checkbox-item:not(:checked)').each(function() { ... }); :
   • $('input.checkbox-item:not(:checked)') : Ce sélecteur est le noyau. Il sélectionne d'abord tous les éléments avec une balise d'entrée et une classe d'éléments de case à cocher, puis filtre ensuite par :not(:checked) pour conserver uniquement les cases à cocher actuellement décochées.
   • .each(function() { ... });?: parcourez chaque case à cocher non cochée correspondant au sélecteur ci-dessus.
6. var texte = $(this).next('label').text(); :
   • $(this) : dans chaque boucle, this fait référence à l'élément DOM en cours d'itération (c'est-à-dire une case à cocher non cochée). $(this) l'enveloppe dans un objet jQuery.
   • .next('label') : recherche l'élément frère suivant de l'élément de case à cocher actuel, mais correspond uniquement à l'étiquette label. Cela nécessite que l'étiquette suive immédiatement l'entrée dans votre structure HTML.
   • .text()?: obtenez le contenu textuel de l’élément d’étiquette correspondant.
7. unCheckedLabelText.push(texte); : Ajoutez le texte d'étiquette obtenu au tableau unCheckedLabelText.
8. Affichage et soumission des données?: l'exemple de code montre comment afficher les données collectées sur la console et la page. Dans les applications réelles, vous enverrez généralement le tableau unCheckedLabelText au serveur principal via une requête AJAX pour un traitement ultérieur. Avant l'envoi, pensez à utiliser JSON.stringify(unCheckedLabelText) pour convertir le tableau en cha?ne JSON.

6. Précautions

• Structure HTML et next('label') : La méthode next('label') nécessite que l'élément label suive l'élément d'entrée. Si votre structure HTML est Texte de l'étiquette ou si l'élément d'étiquette n'est pas après la saisie, vous devez utiliser différentes méthodes jQuery pour obtenir le texte de l'étiquette, par exemple?:
  • Si l'étiquette enveloppe l'entrée?: $(this).parent('label').text()
  • Si le label est associé via l'attribut for : $('label[for="' $(this).attr('id') '"]').text()
  • Les exemples de ce didacticiel suivent strictement la structure d'entrée suivie de l'étiquette.
• Calendrier de déclenchement de l'événement : En fonction de vos besoins, vous pouvez choisir de déclencher cette logique lorsque le formulaire est soumis (comme cet exemple), ou à chaque fois que la case est cochée. La soumission de formulaires est généralement utilisée pour la collecte de données finales, tandis que les mises à jour en temps réel conviennent aux scénarios nécessitant un retour immédiat.
• Considérations sur les performances?: pour les formulaires complexes contenant des centaines ou des milliers de cases à cocher, il peut y avoir une légère surcharge de performances en parcourant fréquemment le DOM. Mais dans la plupart des applications courantes, cette surcharge est négligeable.
• Cohérence du nom de classe?: assurez-vous que toutes les cases à cocher qui doivent participer à cette logique ont le même nom de classe (comme checkbox-item) afin que le sélecteur jQuery puisse correspondre avec précision.
• Traitement backend : la baie collectée doit généralement être envoyée au backend pour stockage ou traitement. Lors de l'envoi de données, assurez-vous que le script back-end peut analyser correctement les données du tableau envoyées par le front-end (par exemple, PHP peut recevoir des tableaux directement ou doit analyser les cha?nes JSON).

Résumer

Grace à ce didacticiel, nous avons appris à utiliser le sélecteur :not(:checked) et la méthode next('label') de jQuery pour collecter efficacement le texte de l'étiquette de toutes les cases non cochées sur la page. Cette méthode simplifie non seulement la logique de collecte de données frontales, mais fournit également des informations contextuelles plus directes et plus riches pour le traitement back-end. La ma?trise de cette compétence vous rendra plus à l'aise lors du développement de formulaires interactifs. Gardez à l'esprit qu'en fonction de la structure de votre HTML, la méthode jQuery pour obtenir le texte de l'étiquette devra peut-être être ajusté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!