jQuery / Selector / :checked — Sélectionner les cases et boutons radio cochés
jQuery :checked cible les cases et radios cochées, ainsi que les options sélectionnées. Limitez type et zone, par exemple input[type="checkbox"]:checked. Utilisez map pour plusieurs valeurs ; lisez une radio depuis l’élément coché de son groupe name.
État coché et valeur sont distincts
La référence :checked inclut les option. Un total dans tout le formulaire n’est donc pas forcément un nombre de cases. L’exemple sépare channels et plan ; Priority ajoute une option au total.
.val() lit le value configuré même sans coche : SMS non coché donne sms. .prop("checked") traite un élément, .is(":checked") au moins un résultat dans un ensemble, .filter(":checked") l’ensemble des résultats. Un getter de propriété sur plusieurs éléments ne lit que le premier.
Les radios de même name dans le même formulaire sont exclusives. Limitez au formulaire et nom. Sans choix, l’ensemble coché est vide et .val() peut être undefined.
Exemple complet de comparaison
Enregistrez et ouvrez checked-demo.html en UTF-8. Internet charge jQuery complet 4.0.0 sans serveur ni compilation. Windows Edge avec 4.0.0 et 3.7.1 a vérifié clavier, tableaux, désactivation, change dynamique et Reset. Rien n’est envoyé au serveur.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checked controls and form data</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
fieldset { margin: 12px 0; }
label { display: block; }
button, select { font: inherit; max-width: 100%; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<form id="preferences">
<fieldset id="channels"><legend>Channels</legend>
<label><input id="email" type="checkbox" name="channels" value="email" checked>Email</label>
<label><input id="sms" type="checkbox" name="channels" value="sms">SMS</label>
<label><input type="checkbox" name="channels" value="archive" checked disabled>Archive (disabled)</label>
<fieldset disabled><legend>Unavailable</legend>
<label><input type="checkbox" name="channels" value="legacy" checked>Legacy</label>
</fieldset>
</fieldset>
<fieldset><legend>Plan</legend>
<label><input id="basic" type="radio" name="plan" value="basic" checked>Basic</label>
<label><input id="pro" type="radio" name="plan" value="pro">Pro</label>
</fieldset>
<label for="priority">Priority</label>
<select id="priority" name="priority"><option value="normal">Normal</option><option value="high">High</option></select>
<button type="button" id="choose">Choose SMS and Pro</button>
<button type="button" id="clear">Clear enabled channels</button>
<button type="button" id="restore">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $form = $("#preferences"), form = $form[0];
let changes = 0;
function boxes() { return $form.find('input[type="checkbox"][name="channels"]'); }
function values($elements) { return $elements.map(function () { return this.value; }).get(); }
function render() {
const $checked = boxes().filter(":checked"), data = new FormData(form);
$("#result").text("checkedBoxes=" + JSON.stringify(values($checked)) +
"\nenabledBoxes=" + JSON.stringify(values($checked.filter(":enabled"))) +
"\nradio=" + ($form.find('input[name="plan"]:checked').val() || "(none)") +
"\ncheckedAttributes=" + JSON.stringify(values(boxes().filter("[checked]"))) +
"\nsubmittedChannels=" + JSON.stringify(data.getAll("channels")) +
"\nform=" + new URLSearchParams(data).toString() +
"\nglobalChecked=" + $form.find(":checked").length + "\nchanges=" + changes);
}
$form.on("change", "input, select", function () { changes++; render(); });
$("#choose").on("click", function () {
boxes().filter(":enabled").prop("checked", false);
$("#sms").prop("checked", true).trigger("change");
$("#pro").prop("checked", true).trigger("change");
});
$("#clear").on("click", function () { boxes().filter(":enabled").prop("checked", false).trigger("change"); });
$("#restore").on("click", function () { form.reset(); changes = 0; render(); });
render();
});
</script>
</body>
</html>Trois channels sont cochés au départ, mais seul Email est transmissible. globalChecked vaut cinq avec radio et option.
checkedBoxes=["email","archive","legacy"]
enabledBoxes=["email"]
radio=basic
checkedAttributes=["email","archive","legacy"]
submittedChannels=["email"]
form=channels=email&plan=basic&priority=normal
globalChecked=5
changes=0- Cliquez SMS ou utilisez Espace : submittedChannels devient ["email","sms"], sous le même nom répété.
- Pro décoche Basic et produit radio=pro, aussi avec les flèches via change.
- Reset puis Choose SMS and Pro garde SMS seul parmi les actifs et Archive/Legacy désactivés ; radio=pro, changes=2.
- checkedAttributes conserve email/archive/legacy, les valeurs initiales.
- Clear enabled channels vide enabledBoxes et submittedChannels mais garde les coches désactivées.
- Reset restaure cases, radio, Priority et compteur.
checkedBoxes contient les valeurs cochées, enabledBoxes celles filtrées par :enabled, submittedChannels le vrai FormData.getAll. changes compte les gestionnaires, plusieurs si plusieurs éléments émettent, pas les clics utilisateur.
Attribut, propriété et rafraîchissement
[checked] teste l’attribut HTML ; la propriété DOM checked et :checked décrivent l’actuel. Le défaut est lié à defaultChecked et peut rester après décochage. N’utilisez pas [checked] ou la vérité de .attr("checked") pour l’état courant.
.prop("checked", true ou false) modifie sans émettre change. L’exemple le déclenche explicitement et rend au départ. Si le rapport reste ancien après affectation programmée, vérifiez événements et rendu.
change est délégué depuis le formulaire conservé aux input/select. Les ajouts ultérieurs peuvent remonter au gestionnaire ; render recherche les cases à chaque fois. Une collection :checked enregistrée n’actualise pas automatiquement ses membres.
Reset appelle form.reset() puis render. L’id restore évite de masquer la méthode. Modifier les attributs initiaux ou les défauts de nouveaux contrôles change aussi la restauration.
Désactivation et plusieurs valeurs envoyées
Une case disabled, y compris dans un fieldset désactivé, peut rester cochée. :checked ne prouve pas l’admissibilité à l’envoi. :enabled tient compte de l’héritage ; FormData omet Archive/Legacy. Chercher seulement l’absence de [disabled] manquerait ces descendants.
Cases et radios non cochées sont normalement absentes, sans chaîne false automatique. Sans value, une case vaut on. Donnez des identifiants significatifs et définissez la gestion des valeurs absentes au serveur.
FormData.getAll() conserve les noms répétés. Object.fromEntries vers une seule clé peut perdre des valeurs. Vérifiez les conventions de tableaux du framework et contrôlez valeurs autorisées et combinaisons côté serveur.
:checked fonctionne aussi dans querySelectorAll natif. Pour les options, limitez à option:checked ou jQuery :selected. En décorant, préservez état réel de l’input et association du label pour aligner couleur et sélection.
