User can't checked input, when jQuery do it? Or something like that

Question

I have problem with jQuery script and checked input. I have such window in HTML:

And as you can see is there one checked input. When I try click on this input (not on text near it, just only on input) then script are run correctly, but input is not checked.

I wrote script to run when you click div, which is the input and text.

Here is a piece of code:

    $('#S8l2560g').find('input').css('cursor', 'pointer').parent().css('cursor', 'pointer').toggle(function() {
    //setCookie('Search information','hidden',168);
    $('#k5ORgvNM span').text('yes, is checked').css('color', 'red');
    $(this).find('input').attr('checked', true);
}, function() {
    //setCookie('Search information','visible',168);
    $('#k5ORgvNM span').text('no, is nonchecked').css('color', 'blue');
    $(this).find('input').attr('checked', false);
});

I do not know why this is happening. I suspect that this is a problem in HTML.

I cut this entire panel, and pasted it into jsFiddle, so you can check it out.

Here is the link: http://jsfiddle.net/IdolwSzutrab7/sv7w5/

Just try to click only on input, and after on text near input.

I even tried to copy the toggle and move it before parrent, but it did not work.

It is not a big problem, because the script works, but it misleads people, making too many times to click.

Can I ask for help? I would like to make it work the way I want it.

Answer 1

As suggested by @Musa use <label /> instead of <span />

<label /> has for attribute to target specific input field. So clicking on the label will focus the input element.

Note: The input <input id="label-check" /> id value must be same as label <label for="label-check"> for value.

HTML:

<label for="label-check">
    <input type="checkbox" id="label-check" style="vertical-align: middle;"/> Nie pytaj więcej...
</label>

JS:

$('#S8l2560g').find('input').css('cursor', 'pointer').change(function(e) {
        if ($(this).is(':checked')) {
            $('#k5ORgvNM span').text('yes, is checked').css('color', 'red');
            $(this).prop('checked', true);
        }
        else {
            $('#k5ORgvNM span').text('no, is nonchecked').css('color', 'blue');
            $(this).prop('checked', false);
        }
    });

CSS:

label {
    cursor: pointer;
}

LIVE EXAMPLE