JavaScript: cocher et décocher toutes les cases

Il arrive souvent de devoir cocher ou décocher toutes les cases d’un formulaire : sélection d’articles, tableau d’administration, liste d’utilisateurs, options en masse, filtres ou actions groupées.

La bonne nouvelle, c’est qu’il n’y a pas besoin de jQuery pour ça. Un peu de JavaScript vanilla suffit largement. Et en bonus, le code sera plus léger, plus clair et plus facile à réutiliser.

Voici plusieurs méthodes modernes pour sélectionner, désélectionner ou inverser toutes les cases à cocher d’un formulaire.

Kinsta: Premium Managed WordPress hosting

Cocher toutes les cases à cocher en JavaScript

La version la plus simple consiste à sélectionner toutes les checkboxes, puis à définir leur propriété checked sur true.

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach((checkbox) => {
	checkbox.checked = true;
});Langage du code : JavaScript (javascript)

Ce code coche toutes les cases présentes dans la page. C’est pratique dans la console du navigateur, mais souvent trop large dans une vraie interface. Dans un formulaire réel, il vaut mieux cibler un conteneur précis.

Décocher toutes les cases à cocher

Pour décocher toutes les cases, on applique le même principe avec false.

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach((checkbox) => {
	checkbox.checked = false;
});Langage du code : JavaScript (javascript)

C’est tout. La propriété checked représente l’état coché ou non coché d’une checkbox.

Cibler uniquement un groupe de cases

Dans l’article original, les cases portaient toutes le nom post[]. On peut garder cette logique, mais avec une syntaxe plus moderne.

const checkboxes = document.querySelectorAll('input[name="post[]"][type="checkbox"]');

checkboxes.forEach((checkbox) => {
	checkbox.checked = true;
});Langage du code : JavaScript (javascript)

Cette version ne touche qu’aux cases dont le nom est post[]. Elle évite de cocher accidentellement d’autres options du formulaire.

Ajouter des boutons “Tout sélectionner” et “Tout décocher”

Voici un exemple complet avec deux boutons et une liste de checkboxes.

<form id="bulk-actions-form">
	<div class="bulk-actions">
		<button type="button" data-action="select-all">Tout sélectionner</button>
		<button type="button" data-action="deselect-all">Tout décocher</button>
	</div>

	<ul>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="101">
				Article 101
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="102">
				Article 102
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="103">
				Article 103
			</label>
		</li>
	</ul>
</form>Langage du code : HTML, XML (xml)

Et le JavaScript associé :

const form = document.querySelector('#bulk-actions-form');

if (form) {
	const checkboxes = form.querySelectorAll('input[name="post[]"][type="checkbox"]');
	const selectAllButton = form.querySelector('[data-action="select-all"]');
	const deselectAllButton = form.querySelector('[data-action="deselect-all"]');

	selectAllButton?.addEventListener('click', () => {
		checkboxes.forEach((checkbox) => {
			checkbox.checked = true;
		});
	});

	deselectAllButton?.addEventListener('click', () => {
		checkboxes.forEach((checkbox) => {
			checkbox.checked = false;
		});
	});
}Langage du code : PHP (php)

Cette version évite le vieux onclick dans le HTML. Le comportement reste dans le JavaScript, et le balisage reste propre.

Créer une fonction réutilisable

Si vous devez réutiliser cette logique à plusieurs endroits, créez une fonction dédiée.

function setCheckboxesState(container, selector, checked) {
	const checkboxes = container.querySelectorAll(selector);

	checkboxes.forEach((checkbox) => {
		checkbox.checked = checked;
	});
}

const form = document.querySelector('#bulk-actions-form');

if (form) {
	form.querySelector('[data-action="select-all"]')?.addEventListener('click', () => {
		setCheckboxesState(form, 'input[name="post[]"][type="checkbox"]', true);
	});

	form.querySelector('[data-action="deselect-all"]')?.addEventListener('click', () => {
		setCheckboxesState(form, 'input[name="post[]"][type="checkbox"]', false);
	});
}Langage du code : PHP (php)

L’avantage : la fonction ne dépend pas d’un formulaire précis. Vous pouvez lui passer un autre conteneur, un autre sélecteur et l’état souhaité.

Le plus lu : GRUB : résoudre l'erreur "Grub loading 1.5. Grub loading, please wait... ERROR 15"

Inverser la sélection des cases à cocher

Parfois, on ne veut pas tout cocher ou tout décocher. On veut inverser l’état actuel : les cases cochées deviennent décochées, et les cases décochées deviennent cochées.

const checkboxes = document.querySelectorAll('input[name="post[]"][type="checkbox"]');

checkboxes.forEach((checkbox) => {
	checkbox.checked = !checkbox.checked;
});Langage du code : JavaScript (javascript)

Cette variante est pratique pour les tableaux d’administration ou les interfaces de modération.

Utiliser une case “Tout sélectionner”

Une autre approche consiste à utiliser une checkbox principale qui contrôle toutes les autres.

<form id="posts-form">
	<label>
		<input type="checkbox" data-select-all>
		Tout sélectionner
	</label>

	<ul>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="101">
				Article 101
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="102">
				Article 102
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="103">
				Article 103
			</label>
		</li>
	</ul>
</form>Langage du code : HTML, XML (xml)

Et voici le JavaScript :

const form = document.querySelector('#posts-form');

if (form) {
	const selectAll = form.querySelector('[data-select-all]');
	const checkboxes = form.querySelectorAll('input[name="post[]"][type="checkbox"]');

	selectAll?.addEventListener('change', () => {
		checkboxes.forEach((checkbox) => {
			checkbox.checked = selectAll.checked;
		});
	});
}Langage du code : JavaScript (javascript)

Quand la case principale est cochée, toutes les cases du groupe sont cochées. Quand elle est décochée, toutes les cases sont décochées.

Gérer l’état indéterminé

Une vraie interface “Tout sélectionner” doit gérer trois états :

aucune case cochée ;
toutes les cases cochées ;
seulement une partie des cases cochées.

Le troisième cas correspond à l’état indeterminate. Il indique visuellement que la sélection est partielle. Cette propriété se définit en JavaScript et ne correspond pas à une valeur envoyée avec le formulaire. Elle sert surtout à représenter l’état de l’interface. :contentReference[oaicite:2]{index=2}

Le plus lu : Python : corriger l’erreur “ImportError: cannot import name main” avec pip

Voici une version complète :

const form = document.querySelector('#posts-form');

if (form) {
	const selectAll = form.querySelector('[data-select-all]');
	const checkboxes = [...form.querySelectorAll('input[name="post[]"][type="checkbox"]')];

	const updateSelectAllState = () => {
		const checkedCount = checkboxes.filter((checkbox) => checkbox.checked).length;

		selectAll.checked = checkedCount === checkboxes.length;
		selectAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
	};

	selectAll?.addEventListener('change', () => {
		checkboxes.forEach((checkbox) => {
			checkbox.checked = selectAll.checked;
		});

		selectAll.indeterminate = false;
	});

	checkboxes.forEach((checkbox) => {
		checkbox.addEventListener('change', updateSelectAllState);
	});

	updateSelectAllState();
}Langage du code : JavaScript (javascript)

Cette version est plus agréable pour l’utilisateur. Si une seule case est cochée sur trois, la case “Tout sélectionner” affiche un état intermédiaire au lieu de mentir honteusement.

Version avec délégation d’événements

Si des lignes sont ajoutées dynamiquement dans le formulaire, par exemple via Ajax, il vaut mieux utiliser la délégation d’événements. On écoute les changements sur le formulaire, puis on vérifie l’élément qui a déclenché l’événement.

const form = document.querySelector('#posts-form');

if (form) {
	const getCheckboxes = () => [
		...form.querySelectorAll('input[name="post[]"][type="checkbox"]'),
	];

	const selectAll = form.querySelector('[data-select-all]');

	const updateSelectAllState = () => {
		const checkboxes = getCheckboxes();
		const checkedCount = checkboxes.filter((checkbox) => checkbox.checked).length;

		selectAll.checked = checkboxes.length > 0 && checkedCount === checkboxes.length;
		selectAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
	};

	form.addEventListener('change', (event) => {
		const target = event.target;

		if (!(target instanceof HTMLInputElement)) {
			return;
		}

		if (target.matches('[data-select-all]')) {
			getCheckboxes().forEach((checkbox) => {
				checkbox.checked = target.checked;
			});

			target.indeterminate = false;
			return;
		}

		if (target.matches('input[name="post[]"][type="checkbox"]')) {
			updateSelectAllState();
		}
	});

	updateSelectAllState();
}Langage du code : JavaScript (javascript)

Cette approche tient mieux si votre interface évolue après le chargement initial de la page.

Récupérer les valeurs des cases cochées

Après avoir sélectionné des cases, vous voudrez souvent récupérer leurs valeurs.

const checkedValues = [
	...document.querySelectorAll('input[name="post[]"][type="checkbox"]:checked'),
].map((checkbox) => checkbox.value);

console.log(checkedValues);Langage du code : JavaScript (javascript)

Le sélecteur :checked cible uniquement les cases actuellement cochées. Pratique, lisible, efficace. On aime quand le DOM fait sa part du boulot.

Exemple complet réutilisable

Voici une version propre et réutilisable pour plusieurs groupes de checkboxes sur une même page. Chaque groupe utilise l’attribut data-checkbox-group.

<form data-checkbox-group>
	<label>
		<input type="checkbox" data-select-all>
		Tout sélectionner
	</label>

	<ul>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="101" data-select-item>
				Article 101
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="102" data-select-item>
				Article 102
			</label>
		</li>
		<li>
			<label>
				<input type="checkbox" name="post[]" value="103" data-select-item>
				Article 103
			</label>
		</li>
	</ul>
</form>Langage du code : HTML, XML (xml)

Le JavaScript :

function initCheckboxGroup(group) {
	const selectAll = group.querySelector('[data-select-all]');

	if (!(selectAll instanceof HTMLInputElement)) {
		return;
	}

	const getItems = () => [
		...group.querySelectorAll('[data-select-item]'),
	].filter((item) => item instanceof HTMLInputElement);

	const updateSelectAll = () => {
		const items = getItems();
		const checkedCount = items.filter((item) => item.checked).length;

		selectAll.checked = items.length > 0 && checkedCount === items.length;
		selectAll.indeterminate = checkedCount > 0 && checkedCount < items.length;
	};

	group.addEventListener('change', (event) => {
		const target = event.target;

		if (!(target instanceof HTMLInputElement)) {
			return;
		}

		if (target === selectAll) {
			getItems().forEach((item) => {
				item.checked = selectAll.checked;
			});

			selectAll.indeterminate = false;
			return;
		}

		if (target.matches('[data-select-item]')) {
			updateSelectAll();
		}
	});

	updateSelectAll();
}

document.querySelectorAll('[data-checkbox-group]').forEach(initCheckboxGroup);Langage du code : JavaScript (javascript)

Cette version évite les IDs obligatoires, fonctionne avec plusieurs groupes, et garde le JavaScript découplé du nom exact des champs.

Le plus lu : HTML5 : corriger l'erreur "The scrolling attribute on the iframe element is obsolete. Use CSS instead."

Pourquoi éviter onclick dans le HTML ?

L’ancien exemple utilisait un bouton avec onclick. Cela fonctionne, mais ce n’est pas idéal.

<input type="button" onclick="SelectAll()" value="Select All">Langage du code : HTML, XML (xml)

Le problème, c’est que le HTML se retrouve mélangé avec le comportement JavaScript. Cela crée aussi des fonctions globales, plus faciles à écraser par accident. Sur un site WordPress chargé en plugins, c’est le genre de petit détail qui finit parfois en chasse au fantôme.

La version moderne consiste à garder le HTML descriptif, puis à attacher les événements depuis le JavaScript avec addEventListener().

Version rapide à coller dans la console

Si vous voulez juste cocher rapidement toutes les cases post[] depuis la console du navigateur, voici la version courte :

document
	.querySelectorAll('input[name="post[]"][type="checkbox"]')
	.forEach((checkbox) => {
		checkbox.checked = true;
	});Langage du code : JavaScript (javascript)

Pour tout décocher :

document
	.querySelectorAll('input[name="post[]"][type="checkbox"]')
	.forEach((checkbox) => {
		checkbox.checked = false;
	});Langage du code : JavaScript (javascript)

Et pour inverser la sélection :

document
	.querySelectorAll('input[name="post[]"][type="checkbox"]')
	.forEach((checkbox) => {
		checkbox.checked = !checkbox.checked;
	});Langage du code : JavaScript (javascript)

À retenir

Utilisez querySelectorAll() pour cibler les checkboxes.
Modifiez la propriété checked pour cocher ou décocher une case.
Évitez onclick dans le HTML.
Utilisez addEventListener() pour attacher vos événements proprement.
Ajoutez indeterminate pour une vraie case “Tout sélectionner” avec état partiel.
Ciblez toujours un formulaire ou un conteneur précis pour éviter les effets de bord.
Gardez jQuery au placard pour ce cas : JavaScript vanilla fait le travail sans transpirer.

Pour un script jetable dans la console, trois lignes suffisent. Pour une interface de production, prenez quelques minutes pour écrire une version propre, scoped et accessible.