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