web-dev-qa-db-fra.com

jQuery: sélection de la case cochée

Supposons que j'ai le code HTML suivant:

<form id="myform">
  <input type='checkbox' name='foo[]'/> Check 1<br/>
  <input type='checkbox' name='foo[]' checked='true'/> Check 2<br/>
  <input type='checkbox' name='foo[]'/> Check 3<br/>
</form>

Maintenant, comment sélectionner les champs de saisie cochés avec le nom 'foo []'?

Ceci est ma tentative, mais cela ne fonctionne pas:

$("#myform input[name='foo']:checked:enabled");
jquerycheckboxinputjquery-selectors
35
bart

Le nom du champ n'est pas foo, c'est foo[]. Vous pouvez utiliser le sélecteur attributeStartsWith :

$("input[name^='foo']:checked:enabled",'#myform');

Idéalement, vous devriez pouvoir faire ceci:

$("input[name='foo[]']:checked:enabled",'#myform');

Mais comme cette réponse l'explique, jQuery l'utilise pour analyser la partie value de la attr=value condition:

(['"]*)(.*?)\3|)\s*\]

\ 3 étant le groupe contenant les guillemets d'ouverture, qui étrangement sont autorisés à être plusieurs guillemets d'ouverture, ou pas de guillemets d'ouverture du tout. Le .*? puis peut analyser n'importe quel caractère, y compris les guillemets jusqu'à ce qu'il atteigne le premier caractère "]", mettant ainsi fin à la correspondance. Il n'y a aucune disposition pour les caractères spéciaux CSS à barre oblique inverse, vous ne pouvez donc pas faire correspondre une valeur de chaîne arbitraire dans jQuery.

En d'autres termes, dès que jQuery atteint le premier ] il pense que la valeur est terminée. Vous êtes donc coincé avec startsWith ou en utilisant des éléments DOM purs, comme l'explique également cette réponse.

SUPER DUPER IMPORTANT EDIT :
Ce bug est corrigé, apparemment. Vous devriez pouvoir utiliser le code que j'ai décrit comme "idéal" ci-dessus.

53
Paolo Bergantino

Vous devez citer l'attribut lors de la sélection et inclure []:

$("#myform input[name='foo[]']:checked:enabled");
5
Seb

En fait, ce que vous avez fonctionne très bien, utilisez simplement des guillemets doubles et incluez les crochets pour qu'il puisse correspondre.

 $("#myform input[name='foo[]']:checked:enabled");

Vous pouvez le voir en action ici: http://jsbin.com/oyoro

Notez que jQuery a eu des problèmes d'activation et de désactivation des crochets dans le passé, ce qui peut expliquer une grande partie de la confusion entourant la nécessité de s'échapper. Je sais que j'ai eu moi-même des problèmes entre crochets et citations.

Voir: http://dev.jquery.com/ticket/344

1
cgp

Je crois que ça va quelque chose comme ça:

$("input #foo[] :checked");

EDIT: Le commentateur a raison. J'aurais dû y aller avec ma première réponse. :) Cette fois, je vais utiliser le "^".

$("input[name^=foo] :checked");
0
Tacoman667