Checkbox doesn't check
===

I have some checkboxes with related fields that are marked up like this:


				<div class="job-position" id="bartending">
					<div>
						<input type="checkbox" id="bartending-checkbox" name="bartending" value="Bartending" />Bartending<br />
						<span class="experience"></span><!-- html here completed with jquery -->
					</div>
					<div class="reference">Reference <span class="instructions">(Name &amp; Phone)</span><br /><input type="text" name="bartending-reference" /></div>
				</div>

And some jquery like this:

    $('input:checkbox').toggle(function(event){
			var jobPositionId=event.target.id
			$('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeIn(200);
			$('input#' + jobPositionId).parent('div').find('span.experience').html(some html here);
		},function(event){
			var jobPositionId=event.target.id
			$('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeOut(200);
			$('input#' + jobPositionId).parent('div').find('span.experience').html('');
		});

When the checkbox is check, jquery fades in an element and writes some html into the <span>. Only problem is that the checkbox does not receive a "check" when you click it.