Comment basculer l'état de la case à cocher avec JavaScript ?

Comment implémenter la fonctionnalité de basculement de case à cocher avec JavaScript

Pour gérer dynamiquement l'état coché d'une case à cocher, JavaScript propose des solutions efficaces. Explorons les différentes approches :

Basculer avec du JavaScript natif

Accédez à la case à cocher en utilisant son ID à l'aide de document.getElementById("checkbox"). Pour cocher la case, définissez sa propriété cochée sur true. A l'inverse, pour la décocher, définissez la propriété sur false.

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

Basculer avec jQuery (Version 1.6)

Avec jQuery 1.6 et supérieur, la méthode prop fournit un moyen pratique de modifier l’état de la case à cocher. Pour cocher la case, utilisez $().prop("checked", true). Pour le décocher, utilisez $().prop("checked", false).

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

Basculement avec jQuery (versions 1.5 et inférieures)

Dans les versions précédentes Les versions jQuery (1.5 et inférieures) utilisent la méthode attr pour contrôler l'état de la case à cocher. La syntaxe reste la même que dans la méthode prop.

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

En utilisant ces méthodes, vous pouvez contrôler de manière transparente l'état coché des cases à cocher en fonction des interactions de l'utilisateur ou de la logique de programmation dans votre code JavaScript.

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!