2009-10-19 8 views
2

Je suis sûr que je vais perdre quelques points de rep pour cela, parce que c'est une question basique, mais je n'arrive pas à comprendre ce que je fais de mal avec les sélecteurs jQuery en utilisant "#" pour sélectionnez par ID.jQuery basic help

donné cet élément dans mon document:

<%= Html.CheckBox("IsAlwaysValid", true, 
        new { onchange = "showHideValidSetList()", id = "IsAlwaysValidCheckBox" })%> 

(qui sort le balisage suivant:

<input checked="checked" id="IsAlwaysValidCheckBox" name="IsAlwaysValid" onchange="showHideValidSetList()" type="checkbox" value="true" /><input name="IsAlwaysValid" type="hidden" value="false" /> 

)

Ensuite, cette fonction à l'aide d'un sélecteur jQuery:

<script type="text/javascript"> 
    function showHideValidSetList() { 
     if ($("#IsAlwaysValidCheckBox").checked) { 
      alert("IsAlwaysValidCheckBox is checked"); 
      return; 
     } 
     else { 
      alert("IsAlwaysValidCheckBox is NOT checked"); 
      return; 
     } 
    } 
</script> 

devrait être exactement équivalent à celui-ci en utilisant le javascript DOM:

<script type="text/javascript"> 
    function showHideValidSetList() { 
     if (document.getElementById("IsAlwaysValidCheckBox").checked) { 
      alert("IsAlwaysValidCheckBox is checked"); 
      return; 
     } 
     else { 
      alert("IsAlwaysValidCheckBox is NOT checked"); 
      return; 
     } 
    } 
</script> 

À droite? Mais la version javascript fonctionne comme prévu, alors que jQuery utilise toujours la branche "else", ce qui montre qu'elle ne regarde pas vraiment l'état de la case à cocher.

Qu'est-ce que je fais mal?

Merci d'avoir porté avec moi.

+2

fyi, nous ne downvote pas les questions "stupides"; il n'y en a pas. nous pourrions downvote doublons si ;-) – geowa4

Répondre

4

Utilisez ceci:

if ($(checkBoxControl).attr("checked")) { 

au lieu de ceci:

if ($("#IsAlwaysValidCheckBox").checked) { 

Bien qu'il ressemble à sélecteurs jQuery retour des éléments DOM (comme les cases à cocher), ils reviennent vraiment un objet jQuery, qui n'a pas une méthode appelée checked. Vous pouvez le voir le plus clairement dans le code source jquery non compressé (de the current release, version 1.3.2):

jQuery.fn = jQuery.prototype = { 
    init: function(selector, context) { 
     // ... 
     // Handle $(DOMElement) 
     if (selector.nodeType) { 
      this[0] = selector; 
      this.length = 1; 
      this.context = selector; 
      return this; 
     } 
     // ... 
    } 
} 

La plupart des méthodes jQuery intéressantes (comme Animer, attr, html, etc.) fonctionnent sur this.context, qui est spécifiée ou redéfinie chaque fois que vous appliquez un sélecteur.

+0

Merci, Jeff (et tout le monde qui a répondu). Je n'ai pas compris la distinction entre retourner un objet jQuery et renvoyer l'élément sélectionné. –

+0

Mon plaisir - j'adore jQuery, mais cela ne les tuerait pas pour expliquer cet idiome dans la documentation de base. :) –

0

essayez ceci:

<script type="text/javascript"> 
    function showHideValidSetList() { 
     if ($("#IsAlwaysValidCheckBox").val()) { 
      alert("IsAlwaysValidCheckBox is checked"); 
      return; 
     } 
     else { 
      alert("IsAlwaysValidCheckBox is NOT checked"); 
      return; 
     } 
    } 
</script> 

la méthode val est en quelque sorte une façon « élément transversal » de vérifier la valeur ... que ce soit une zone de texte, liste de sélection, ou case à cocher ... vous pouvez utiliser .val() pour obtenir/définir la valeur de celui-ci :-)

3
$("#IsAlwaysValidCheckBox").checked 

est incorrect que $("#IsAlwaysValidCheckBox") retourne l'objet jQuery, pas l'élément. L'objet jQuery n'a aucune propriété appelée checked, ce qui explique pourquoi il saisit else.

vous voulez:

$("#IsAlwaysValidCheckBox").val() 

ou:

$("#IsAlwaysValidCheckBox:checked").length > 0 

ou:

$("#IsAlwaysValidCheckBox").attr("checked") === "checked" 

ou:

$("#IsAlwaysValidCheckBox")[0].checked 

ou:

$("#IsAlwaysValidCheckBox").get(0).checked 
1

Avez-vous essayez d'utiliser

if ($("#IsAlwaysValidCheckBox").attr("checked")) { 
1

Vous devez utiliser:

$("#IsAlwaysValidCheckBox").attr("checked") 

pour déterminer si la case est cochée ou non.

1

Encore une autre façon de faire une chose simple:

$('#IsAlwaysValidCheckBox:checked').length

Le sélecteur: checked est jquery spécifique pour retourner un élément contrôlé. La longueur vérifie s'il y a des éléments retournés.

Plusieurs façons de faire la même chose.