Question

So I have a checkbox and a span

<input type="checkbox" class="checker"> <span class="something">Label</span>

From which the span already has some functionality based on clicking it, I am adding a checkbox to the equation for visual aid. What I am trying to do is, when the checkbox is checked/unchecked I want it to trigger the spans already existing click function. Which this I can do.

I also want the same click function on the span to check/uncheck the checkbox next to it, while continuing its base function. Which this I can do as well.

The snag it seems is when I have both logics in the script, one will always X out the other, leaving one working and the other not. So I am trying to figure out how to make this work in harmony and I apparently am having issues thinking outside the box at the time and need some assistance getting there.

Here is the JS I am attempting to use currently

$('.checker').live('click', function(e){e.preventDefault();$(this).siblings('.something').trigger('click');});
$('.something').live('click', function(e)
{
    e.preventDefault();
    if($(this).siblings('.checker').is(':checked'))
    {
        $(this).siblings('.checker').attr('checked', false);
    }
    else
    {
        $(this).siblings('.checker').attr('checked', true);
    }
});

Answer 1

Please use Label Tag

<li class="contact">
    <input id='input1' type="checkbox" class="checkbox" name="checkableitems[]" value="1333">
    <label for='input1'>Baby James</label>
</li>

http://jsfiddle.net/xgB5X/5/

Still you want it in your style then please refer this fiddle.

$('.something').on('click', function() {
    var chk_box = $(this).prev();
    var chk_status = !(chk_box.is(':checked'));
    chk_box.attr('checked', chk_status);
});

http://jsfiddle.net/xgB5X/10/