Maison > interface Web > js tutoriel > jQuery Cochez si CheckBox est coché

jQuery Cochez si CheckBox est coché

Joseph Gordon-Levitt
Libérer: 2025-03-03 00:21:16
original
506 Les gens l'ont consulté

jQuery Check if Checkbox is Checked

Ce guide explore plusieurs méthodes de vérification des états de case à cocher à l'aide de jQuery. Ces techniques sont particulièrement utiles pour valider les soumissions de formulaires, garantissant qu'un utilisateur a sélectionné les options nécessaires avant de procéder.

Vérification si une case à cocher est cochée

Voici trois façons de déterminer si une case à cocher est actuellement sélectionnée:

// Method 1
$('#checkBox').attr('checked'); // Returns "checked" if checked, undefined otherwise (older jQuery versions)

// Method 2 (Recommended)
$('#edit-checkbox-id').is(':checked'); // Returns true if checked, false otherwise

// Method 3 (For older jQuery versions < 1.3,  use `checked` instead of `@checked`)
$("input[type=checkbox][checked]").each(function() {
    // Code to execute if checkbox is checked
});
Copier après la connexion

Vérification si une case à cocher n'est pas cochée

Les extraits de code suivants montrent comment vérifier une case non cochée :

if ($('input[name=termsckb]').attr('checked') != true) {
    $('#captcha-wrap').hide();
}
Copier après la connexion

ou

if ($('#email_ckb').attr('checked') != true) {
    $('#captcha-wrap').hide();
}
Copier après la connexion

Questions fréquemment posées (FAQ)

Cette section fournit des réponses concises aux questions courantes concernant la manipulation de la boîte à cocher jQuery:

Q: Comment cocher l'état coché d'une boîte à cocher à l'aide de jQuery?

a: Utilisez la méthode .is(':checked'):

if ($('#checkbox_id').is(':checked')) {
    // Checkbox is checked
} else {
    // Checkbox is not checked
}
Copier après la connexion

Q: Comment vérifier ou décocher une case à cocher à l'aide de jQuery?

a: Utilisez la méthode .prop():

// Check
$('#checkbox_id').prop('checked', true);

// Uncheck
$('#checkbox_id').prop('checked', false);
Copier après la connexion

Q: Comment basculer l'état d'une boîte à cocher à l'aide de jQuery?

a: Simuler un clic:

$('#checkbox_id').click();
Copier après la connexion

Q: Comment obtenir la valeur d'une case cochée?

a: Utilisez la méthode .val():

var value = $('#checkbox_id:checked').val();
Copier après la connexion

Q: Comment gérer les événements de modification de la case à cocher?

a: Utilisez la méthode .change():

$('#checkbox_id').change(function() {
    if ($(this).is(':checked')) {
        // Checkbox is checked
    } else {
        // Checkbox is not checked
    }
});
Copier après la connexion

Q: Comment sélectionner / désélectionner toutes les cases?

a: Utilisez le sélecteur input:checkbox avec .prop():

// Select all
$('input:checkbox').prop('checked', true);

// Deselect all
$('input:checkbox').prop('checked', false);
Copier après la connexion

Q: Comment activer / désactiver une case à cocher?

a: Utilisez la méthode .prop('disabled', true/false).

Q: Comment vérifier si une case à cocher est activée / désactivée?

a: Utiliser .is(':disabled').

Q: comment gérer les événements de clic de case à cocher?

a: Utilisez la méthode .click() (similaire à la méthode .change() mais déclenchée uniquement sur les clics directs).

Cette réponse révisée fournit des explications plus claires et des exemples de code plus concises, répondant aux exigences de l'invite d'origine pour le reformatique tout en maintenant le sens d'origine et le placement d'image.

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!

Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal