Jquery et checkbox

**Nelmo** · 17/10/2012, 12h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le code Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 17/10/2012, 13h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**Nelmo** · 17/10/2012, 13h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 17/10/2012, 13h50

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.

**SpaceFrog** · 17/10/2012, 14h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

serait plus direct

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"/>

**Bovino** · 17/10/2012, 15h05

Attention !
$(':checkbox') est déprécié et est donc susceptible de disparaitre : http://bugs.jquery.com/ticket/9400.

**Nelmo** · 17/10/2012, 16h18

merci pour ses réponses.

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

Sujet clos

Cordialement,
Nelmo

Jquery et checkbox

jQuery

Discussions similaires

Partager

Partager