Impossible de contrôler l'état de la case à cocher - jquery

Question

Je ne peux pas obtenir cet événement onClick pour contrôler l'état de la case à cocher.

 init: function() { 
      $('.billing input[type="checkbox"]').bind('click', function (e) { 
       e.preventDefault(); 
       iKeyless.page.toggleShippingForm($(e.currentTarget)); 
      }); 
     }, 
     toggleShippingForm: function (el) { 
      if (el.attr('checked')) { 
       $('.shipping').parents('.yui-u').addClass('hide'); 
       el.attr('checked', false); 
      } else { 
       $('.shipping').parents('.yui-u').removeClass('hide'); 
       el.attr('checked', true); 
      } 
     } 

Il charge avec la case cochée et il reste vérifié indépendamment de ce que je fais ...

Answer 1

Il devrait juste être this passé pour faire référence à l'élément <input> ... si vous n'avez pas besoin d'un objet jQuery, voici une version de travail:

init: function() { 
    $('.billing input[type="checkbox"]').bind('click', function (e) { 
     e.preventDefault(); 
     iKeyless.page.toggleShippingForm($(this)); 
    }); 
}, 
toggleShippingForm: function (el) { 
    if (el.attr('checked')) { 
     $('.shipping').parents('.yui-u').addClass('hide'); 
     el.attr('checked', false); 
    } else { 
     $('.shipping').parents('.yui-u').removeClass('hide'); 
     el.attr('checked', true); 
    } 
} 

Mais depuis .checked est une propriété DOM, vous pouvez simplement le faire (sans conversion à un objet jQuery):

init: function() { 
    $('.billing input[type="checkbox"]').change(function (e) { 
     e.preventDefault(); 
     iKeyless.page.toggleShippingForm(this); 
    }); 
}, 
toggleShippingForm: function (el) { 
    $('.shipping').parents('.yui-u').toggleClass('hide', el.checked); 
} 

L'élément est en train de changer son statut .checked ... il suffit de l'utiliser dans l'événement change. Si nécessaire, modifiez le .toggleClass('hide', el.checked) en .toggleClass('hide', !el.checked), en fonction de la manière dont il devrait être visible.