jquery php forme validation case

Question

<input type="checkbox" class="christmasCheckBox" name="additionalDonationCheckbox" value="yes" id="additionalDonationCheckbox" 
<?php echo (isset($_POST['additionalDonationCheckbox'])&&($_POST['additionalDonationCheckbox']!='')) ? 'checked="checked"' : ''; ?> /> 



$('#additionalDonationCheckbox').click(
    function() 
    { 
     ($(this).attr('checked')) ? alert('checked') : alert('unchecked'); 
    } 
); 

J'ai un formulaire, et avant de le soumettre, si je clique sur la case à cocher il alerte 'cochée' si cochée et 'non cochée' si non cochée.

Si je soumets le formulaire avec la case non cochée, (et quelque chose d'autre dans le formulaire échoue ma validation php), puis cliquez sur la case à cocher, ce qui précède fonctionne toujours correctement.

Toutefois, si je soumets le formulaire avec la case cochée, (et quelque chose d'autre dans le formulaire échoue ma validation php) et puis cliquez sur la case à cocher, si elle est décochée ou cochée elle alerte juste 'vérifiée'.

Je devine c'est parce que j'ai placé le code de php dans l'entrée pour echo 'vérifié = "vérifié"', mais je ne peux pas trouver un moyen de contourner cela?

Answer 1

Vous voulez changer la façon dont vous déterminez si l'élément est checked:

$('#additionalDonationCheckbox').click(
    function() 
    { 
     $(this).is(':checked') ? alert('checked') : alert('unchecked'); 
    } 
); 

Ou

$('#additionalDonationCheckbox').click(
    function() 
    { 
     $(this).prop('checked') ? alert('checked') : alert('unchecked'); 
    } 
); 

En effet, checked est à la fois une propriété DOM et un attribut DOM. La différence entre eux peut être importante dans certaines situations (comme celle-ci).

L'attribut DOM checked fait référence à l'état initial de la case à cocher. Ainsi, si la case à cocher a été créée avec checked="checked", l'attribut DOM checked renvoie toujours 'checked', même si la case à cocher a été décochée depuis.

La propriété DOM checked fait référence à l'état actuel de la case et se comporte comme vous le souhaitez. Il retournera si une case est cochée maintenant qu'elle ait été vérifiée ou non lors du chargement du document.

Il s'agit d'une différence subtile que confuse le fait que jQuery ne soit pas cohérent pour savoir si $.attr('checked') renvoie l'attribut ou la propriété dans les versions. Les détails peuvent être trouvés dans le documentation.

Ceci est encore plus confus par a bug dans jquery 1.6.3 et 1.6.4 qui renvoie une valeur périmée pour $(checkbox).attr('checked') après $(checkbox).click().

En résumé, si vous voulez être sûr que vous obtenez l'état actuel de la case à cocher, utilisez l'appel ou l'appel is(':checked')prop('checked').