Failed to control checkbox status - jquery

Question

I cannot get this onClick event to control the checked state of the checkbox .. any thoughts?

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); } } 

It loads with the checkbox selected and it is checked no matter what I do ...

Answer 1

It should just be passed this to refer to the <input> element ... although you do not need a jQuery object, here is the working version:

 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); } } 

But since .checked is a DOM property, you can simply do this (without converting to a jQuery object):

 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); } 

An element changing its .checked status already ... just use it in the change event. If necessary, change the value of .toggleClass('hide', el.checked) to .toggleClass('hide', !el.checked) , depending on how it should be visible.