11564 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQUERY - Ajouter une classe par rapport à une checkbox

Bonjour à tous Smiley smile
J'ai actuellement un tableau HTML, avec des checbox pour chaque <th>. Le but étant de masquer à l'impression les colonnes cochées.
Pour ce faire, j'ai créé une classe .th_cb dans ma feuille de style "impression" et j'ai mis comme valeur display: none.
Côté JQUERY, j'essaye d'attribuer la classe .th_cb au <th> dont la checbox est côché. Mais bien sûr, cela ne marche pas Smiley decu 

<th>
     <input type="checkbox" class="cb"/> Commune
</th>
<th>
     <input type="checkbox" class="cb"/> PF
</th>
<th>
     <input type="checkbox" class="cb"/> Zonage
</th>



$('.cb').each(function() {
	var cb = $(this).attr();
	if(cb == 'checked') {
		$(this).parent().addClass('th_cb');
	}
	else {
		$(this).parent().removeClass('th_cb');
	}
});



.th_cb {
     display: none;
}

Modifié par zombibiot (03 Oct 2017 - 10:54)
Oui, effectivement cela ne fonctionne pas xD
Du coup, j'ai mis à jour le code mais j'ai l'impression que ma condition ne marche pas Smiley ohwell 

$('.cb').each(function() {
	var cb = $(this).attr();
	if(cb == 'checked') {
		$('this').parent().addClass('th_cb');
	}
	else {
		$('this').parent().removeClass('th_cb');
	}
});
Oups, petite modification:

$('.cb').each(function() {
	var cb = $(this).attr();
	if(cb == 'checked') {
		$(this).parent().addClass('th_cb');
	}
	else {
		$(this).parent().removeClass('th_cb');
	}
});

Mais bien sur, ça ne marche toujours pas ! Smiley fache
Modérateur

	var cb = $(this).attr();

En même temps cb vaut tout le temps null.


if ($(this).prop('checked')) {

me paraît plus judicieux.
Il doit manquer du code, car actuellement il n'y a aucun événement qui déclenche ce bout de code.
Hormis le chargement du JS.
Modifié par Oken (03 Oct 2017 - 11:45)
Non.

.each() va appliquer la function à tous ses éléments. Mais il faut un événement pour le déclencher.
Avec le code que tu nous a présenté, il n'y en a pas. Sauf celui du chargement initial de ce code (chargement du JS).

Tu peux remplacer .each() par .on(), qui lui va ajouter un événement à tes checkbox.

Par contre ta condition else ne servira a rien. Smiley smile
Modifié par Oken (03 Oct 2017 - 12:09)
C'est bon Oken ! Effectivement, il manquait un déclencheur Smiley cligne
Voici mon code:

$('.cb').each(function(){
	$(this).click(function(){
		if($(this).prop('checked')){
			$(this).parent().addClass('th_cb');
		}
		else{
			$(this).parent().removeClass('th_cb');
		}
	});
});

Un grand merci à tous pour votre aide Smiley cligne
Sujet résolu ! Smiley biggrin
Petite rectification, comme le disait plus haut Oken, pas besoin du .each Smiley cligne 

$('.cb').click(function(){
	if($(this).prop('checked')){
		$(this).parent().addClass('th_cb');
	}
	else{
		$(this).parent().removeClass('th_cb');
	}
});
Sujet clos
Aller à