[javascript]-Détecter les changements des checkbox

Marsh Posté le 20-12-2019 à 13:44:53

Bonjour,

J'ai un tableau avec une checkbox pour chaque ligne.
Lorsqu'un utilisateur clique dessus j'active ou désactive des fonctionnalités en ajax, pas de souci.

Je souhaite faire une checkbox supplémentaire qui coche ou décoche toutes les cases en même temps, et qui donc déclenche aussi mon autre fonction pour activer/désactiver les fonctionnalités... Et c'est là que ça coince.
Ma checkbox général a bien un effet sur toutes les autres, mais la fonction qui devrait être lancée au moment du changement d'état de chacune ne se lance pas.

Voici mon code:

Fonction lancée lors d'un clic sur le checkbox générale:

Code :

$(document).on('click', 'input[name="check_all"]', function(e) {
if($(this).is(':checked')) {
$('input[name="actif"]').prop('checked', true);
} else {
$('input[name="actif"]').prop('checked', false);
}
});

Fonction lancée lors d'un clic sur une checkbox simple (et qui donc devrait être lancée lors du clic sur la générale):

Code :

$(document).on('change', 'input[name="actif"]', function(e) {
$.ajax({
url : 'L_URL',
type : 'POST',
data : {mes_donnees},
dataType : 'html',
success : function(html) {
// Succès: Aucun retour
},
error : function(resultat){
alert('Erreur : ' + resultat)
}
});

La seconde fonction fonctionne donc très bien lors d'un clic sur une checkbox seule, mais n'est pas activée lors d'un clic sur la générale (mais l'état des checkbox à l'écran change bien lui).

Par avance, merci pour votre aide.

Reply

Marsh Posté le 20-12-2019 à 13:44:53

Reply

Marsh Posté le 20-12-2019 à 14:41:11

trigger('change') https://api.jquery.com/trigger/ ?

Code :

$(document).on('click', 'input[name="check_all"]', function(e) {
if($(this).is(':checked')) {
$('input[name="actif"]').attr('checked', true).trigger('change');
} else {
$('input[name="actif"]').attr('checked', false).trigger('change');
}
});

https://jsfiddle.net/etwhpbyf/

Par contre si on prend mon code html et ta logique de on change : ça déclenchera 3 appel AJAX, que l'on coche ou que l'on décoche, c'est pas top niveau optimisation des ressources... ^^

---------------
D3

Reply

Marsh Posté le 20-12-2019 à 15:03:15

Merci beaucoup, je viens de tester et ça fonctionne parfaitement.

J'ai juste ajouté un petit truc à ton code pour que le "change" ne se fasse que sur les éléments dont la coche change réellement (sinon c'est lancé aussi pour ceux qui étaient déjà cochés:

$('input[name="actif"]:not(:checked)').prop('checked', true).trigger('change');

Encore merci!
Je verrai pour optimiser ça en mettant par exemple les ID à changer dans un tableau, puis ne lancer la fonction ajax une seule fois avec ça.

Reply

[javascript]-Détecter les changements des checkbox

Sujets relatifs:

Leave a Replay