How to toggle checkbox when parent element is clicked.

How to toggle checkbox when parent element is clicked.

I have an <input type="checkbox"> whose immediate parent is an <a> tag.  The <a> is significantly larger than the <input>.

I want the checkbox to toggle on/off whether the <a> is clicked or the checkbox itself.  I also want to store the value of the checkbox after it changes.

This sounds simple but I'm having trouble with the event bubbling (as in, I don't understand it).

Here is my current code.

HTML:
  1. <a href="javascript:void(0)">Some text <input type="checkbox"></a>
JS:
  1. $('a').click(function() {
  2.     $(this).find('input').click();
  3. });
  4. $('input').click(function(e) {
  5.     e.stopPropagation();  //?
  6.     //store the value of the checkbox ...
  7. });