Posons d'abord quelques conditions:

  • La master checkbox aura pour ID item-all
  • Les autres auront pour ID: chk-item-x
  • item est un nom représentatif libre
  • x est un ID unique

Dans l'exemple du screenshot, une liste d'utilisateurs, item vaut user, et id vaut l'id de l'utilisateur dans la base de données, ce qui nous donne un truc dans ce style:

<table>
	
	<thead>
		<th><input type="checkbox" name="user-all" id="user-all" /></th>
		<th>Identifiant</th>
		<th>Groupe</th>
	</thead>
 
	<tr id="user-1">
		<td><input type="checkbox" id="chk-user-1" name="user[1]" /></td>
		<td><a href="users?m=edit&user=1">geoffrey</a></td>
		<td>Super-utilisateur</td>
	</tr>
 
	<tr id="user-2">
		<td><input type="checkbox" id="chk-user-2" name="user[2]" /></td>
		<td><a href="users?m=edit&user=2">quintana</a></td>
		<td>Super-utilisateur</td>
	</tr>
 
</table>

Bon, pour déclencher le cochage automatique, nous utiliserons l'événement onclick sur user-all, qui devient donc:

<input type="checkbox" name="user-all" id="user-all" onclick="toggleAll('user');" />

Et maintenant le javascript:

function toggleAll(name) {
 
	var inputs	= document.getElementsByTagName('input');
	var count	= inputs.length;
	
	for (i = 0; i < count; i++) {
	
		_input = inputs.item(i);
		
		if (_input.type == 'checkbox' && _input.id.indexOf('chk-' + name) != -1) {
		
			_input.checked = document.getElementById(name + '-all').checked;
		
		}
		
	}
 
}

Rien de bien compliqué ici:

  • On récupère la liste des champs input
  • On en fait le tour
  • Pour les champs checkbox, on vérifie que l'id contient chk-user
  • Si c'est le cas, on lui affecte la valeur de user-all

Et voilà :-) Bon bien sur, je ne suis pas un expert en javascript, ni même en DOM, donc si quelqu'un voit une abhération dans mon code, je serais ravi d'en être informé.