Jquery et checkbox

Version imprimable

Jquery et checkbox

Bonjour,

Amateur et novice en dev, je tente de jouer avec Jquery.
J'ai un tableau html qui, pour chaque ligne, comporte une checkbox. J'attribue une valeur à cette checkbox en fonction de la ligne afin de réaliser un traitement se basant sur cette valeur (a term)

Dans un premier temps, j'aimerais réussir a connaitre l'état de la checkbox après un clic dessus. Ensuite, je verrais pour décocher toute les cases de class .td_checkbox et ne garder que celle qui est coché .... Mais déja, j'aimerais réaliser cette première fct ...

Pour le moment, j'ai tenté d'écrire la chose suivante :
Sur click : Si la checkbox est checked, afficher une alerte
Helas, ca ne marche pas.

Ce qui marche pour le moment :
Sur clic : Afficher Alert

L'élément sur lequel je souhaite travailler

Code:

<td id="td_checkbox" class="td_checkbox"><input type="checkbox" name="checkbox[]" value="<?php echo $resultat['id']?>"/>

Le code Jquery
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> $(document).ready(function() { $('.td_checkbox').click(function () { if (this.checked) { alert('clique'); } }) }); </script>
Pourriez-vous m'aider à comprendre mon erreur ?

Cordialement,

Nelmo

17/10/2012, 13h21
SpaceFrog
Code:

1 2 $('.td_checkbox').click(function () { if (this.checked) {
.td_checkbox est la classe attirbuée au td ...

un td ne possède pas de propriété checked ...

Ok, merci.

En gros, si je comprend, j'attend un event sur le td et non sur la checkbox ...

J'ai ajouté une class à ma checkbox et :

le code fonctionnel :
Code:

1 2 3 4 5 6 7 $(document).ready(function() { $('.checkbox').click(function () { if (this.checked) { alert('clique'); } }) });
petite question. J'ai tenté de l'écrire sous une autre forme ( piocher en partie sur un site web)
Dans cette forme, qu'est-ce qu'il ne va pas ?
Code:

1 2 3 4 5 6 7 $(document).ready(function() { $('.checkbox').click(function () { if $(this).is(':checked') { alert('clique'); } }) });

17/10/2012, 13h50
Bovino

Citation:

Dans cette forme, qu'est-ce qu'il ne va pas ?

Rien, ton code est correct.
La seule différence se situe au niveau des performances.
Dans la version jQuery (la seconde), tu es obligé de lancer la mécanique de jQuery sur $(this) pour récupérer l'objet correspondant puis encore une fois lorsque tu fais .is(':checked') alors que dans la version vanilla (JavaScript pur), this correspond déjà à un objet DOM dont une des propriétés natives s'il s'agit d'un checkbox ou d'un radio est checked qui permet de savoir si cet objet est coché ou non. Il y a donc beaucoup moins de traitements sur la première syntaxe et donc un code plus performant.

En règle générale, il faut savoir juger si l'utilisation de jQuery (ou de tout autre framework) apporte réellement un plus en terme de concision et de gestion des cas particuliers (différences entre navigateurs) pour estimer le rapport coût (performance) / avantage (code plus court donc plus facile à maintenir).
Dans ce cas précis, l'utilisation des méthodes de jQuery est très largement désavantageux.

Code:

1
2
 $('.checkbox:checked').click(function () {
            alert('clique');})

serait plus direct

sauf que sur le ready ils ne sont pas forcément checked ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
 
$(function(){
$(':checkbox').click(function(){ if($(this).is(':checked')){ alert($(this).val())} })
});
 
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>
<input type="checkbox" value="4"/>
<input type="checkbox" value="5"/>
<input type="checkbox" value="6"/>
<input type="checkbox" value="7"/>
<input type="checkbox" value="8"/>

17/10/2012, 15h05
Bovino

Attention !
$(':checkbox') est déprécié et est donc susceptible de disparaitre : http://bugs.jquery.com/ticket/9400. ;)
17/10/2012, 16h18
Nelmo

merci pour ses réponses.

je vais potasser tout ca et vous remercie pour votre aide.

Sujet clos

Cordialement,
Nelmo