jQuery val() et les cases à cocher

Question

Y a-t-il une raison pour laquelle val() étant inutile pour les contrôles de cases à cocher, alors qu'elle est utile pour obtenir des données d'entrée de manière cohérente dans tous les autres contrôles d'entrée ?

Par exemple, pour les cases à cocher, il semble qu'il faut renvoie toujours "on", quel que soit l'état de la case à cocher. Pour les autres contrôles d'entrée qui n'ont pas d'attribut "value", par exemple select et textarea, il se comporte comme prévu. Voir :

http://jsfiddle.net/jamietre/sdF2h/4/

Je ne vois pas de raison pour laquelle il ne reviendrait pas. true ou false . Si ce n'est pas le cas, il faut au moins renvoyer "on" uniquement lorsque la case est cochée, et une chaîne vide dans le cas contraire. Si ce n'est pas le cas, il faut au moins toujours renvoyer une chaîne vide, étant donné que les cases à cocher n'ont pas d'objet de type value attribut !

Je sais évidemment comment obtenir la valeur en utilisant attr mais voici la situation. Je suis en train de développer une implémentation simple (jusqu'ici en tout cas) de jQuery en C# pour faire du parsing HTML sur le serveur, et j'essaie d'être complètement fidèle à l'implémentation de jQuery pour qu'elle se comporte de manière cohérente sur le client ou le serveur par rapport au même DOM. Mais cela semble stupide et j'ai du mal à me convaincre de coder "value" pour qu'il renvoie "ON" pour une case à cocher, quoi qu'il arrive. Mais si je ne le fais pas, ce ne sera pas cohérent. J'essaie donc de comprendre : y a-t-il une raison de faire cela ? Est-ce que cela sert à quelque chose, ou est-ce simplement un artefact quelconque ? Est-ce que quelqu'un utiliserait jamais le val() contre une case à cocher, si oui, pourquoi ? Si ce n'est pas le cas, pourquoi les architectes de jQuery ont-ils opté pour cette approche pour qu'elle ne soit pas utile ?

Answer 1

Je ne vois pas de bonne raison pour que ça ne renvoie pas ne retournerait pas vrai ou faux. A défaut de retournez au moins "on" seulement quand c'est vérifié, et une chaîne vide dans le cas contraire. Si ce n'est pas le cas, retournez au moins toujours une chaîne vide, étant donné que les cases à cocher n'ont pas d'attribut de valeur !

Les cases à cocher ont un attribut de valeur. Il est assez courant de l'utiliser dans les cases à cocher multiples des formulaires, par exemple :

<input type="checkbox" name="foo[]" value="1" />
<input type="checkbox" name="foo[]" value="2" />

Ensuite, lorsque l'utilisateur soumet le formulaire, le serveur peut analyser les cases à cocher qui ont été cochées en vérifiant les valeurs de la balise foo[] tableau. La valeur de la case à cocher ne change pas qu'elle soit cochée ou non ; le navigateur n'envoie tout simplement pas les valeurs des cases à cocher non cochées au serveur. Si vous le faites, par exemple $('#your-form').serialize() en jQuery, il devrait fonctionner de la même manière ; il ne devrait pas inclure les valeurs des cases à cocher non cochées. Si vous omettez la valeur de la case à cocher, elle prend simplement la valeur par défaut suivante on .

Si vous souhaitez vérifier si une case à cocher individuelle est cochée ou non en jQuery, la meilleure façon de le faire est de procéder comme suit $(this).is(':checked')

Answer 2

Vous dites que "les cases à cocher n'ont pas value attribut". Au contraire, le value L'attribut est facultatif sauf sur les cases à cocher et les cases radio.

De les spécifications du W3C :

[le value attribut] est facultatif sauf lorsque l'attribut type a la valeur "radio" ou "checkbox".

on est la valeur par défaut que votre navigateur attribue à l'élément lorsque vous ignorez la spécification et que vous ne définissez pas de paramètre value attribut.

Vous devez vous souvenir de la signification de cette valeur : elle est envoyée avec le message name de l'élément au serveur lorsque le formulaire est soumis. Si cette case n'est pas cochée, la valeur n'est pas envoyée. La valeur on n'est donc envoyé que lorsque la case est cochée.

Answer 3

Peut-être que ceci devrait aider

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
      alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
    });

});

Utilisez input[type=checkbox] pour sélectionner input type="checkbox" puisque la case à cocher est une entrée avec type="checkbox".

Et aussi mettre l'attribut valeur à la case à cocher.

Sur jsfiddle

UPDATE

<form method="post" action="#">
    PHP<input type="checkbox" name="ch[]" value="PHP"><br/>
    JS<input type="checkbox" name="ch[]" value="JS"><br/>
    JAVA<input type="checkbox" name="ch[]" value="JAVA"><br/>
    PYTHON<input type="checkbox" name="ch[]" value="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

Et php

if($_POST){
foreach($_POST['ch'] as $post => $value){
    echo "$post -> $value <br/>";
}
}

Ils portent tous le même nom car ils constituent un groupe commun de boutons. Vous pouvez savoir ce qui a été vérifié et ce qui ne l'a pas été grâce à leurs valeurs.

L'autre moyen est

if($_POST){
    foreach($_POST as $post => $value){
        echo "$post -> $value <br/>";
    }
}

<form method="post" action="#">
    PHP<input type="checkbox" name="PHP"><br/>
    JS<input type="checkbox" name="JS"><br/>
    JAVA<input type="checkbox" name="JAVA"><br/>
    PYTHON<input type="checkbox" name="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

Mais le précédent semble ajouter plus de dynamique et moins de fastidieux (je crois).

Et pour répondre à la question de @Capsule

alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
<input type="checkbox"> Check me.

retourne la valeur on Je crois que c'est la valeur par défaut de la case à cocher.

Et la deuxième expérience donne aussi on valeur.

J'espère que je ne me trompe pas.

Answer 4

Si vous passez un tableau à la fonction val, elle définira la case à cocher comme cochée si la valeur de la case à cocher correspond à la valeur du tableau. Source : http://api.jquery.com/val/#val-value

<input id="checkbox" type="checkbox" value="remember">    

$("#checkbox").val(["remember"]);

Answer 5

Une case à cocher n'est pas toujours seule et sa valeur est transmise lors de la soumission du formulaire (sinon, le nom/valeur n'est pas transmis du tout).

C'est très utile lorsque vous créez des tableaux à partir de cases à cocher, vous pouvez utiliser name="test[]" comme leur nom, et définissent des valeurs différentes dans chacune d'elles. En analysant le résultat soumis, vous obtenez un tableau contenant toutes les valeurs vérifiées.