用户无法检查输入,当jQuery这样做？或类似的东西

Question

我有jQuery脚本和检查输入的问题.我有这样的HTML窗口:

正如您所看到的那样,有一个检查输入.当我尝试单击此输入(不在其附近的文本上,仅在输入上)时,脚本正确运行,但不检查输入.

我写了脚本,当你点击div时运行,这是输入和文本.

这是一段代码:

    $('#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);
});

我不知道为什么会这样.我怀疑这是HTML中的一个问题.

我剪了整个面板,然后将它粘贴到jsFiddle中,这样你就可以查看了.

这是链接:http://jsfiddle.net/IdolwSzutrab7/sv7w5/

只需尝试单击输入,然后单击输入附近的文本.

我甚至试图复制切换并在parrent之前移动它,但它没有用.

这不是一个大问题,因为脚本有效,但它误导了人们,点击次数太多了.

我可以寻求帮助吗？我想让它按照我想要的方式工作.

Answer 1

正如@Musa建议的那样，使用<label />而不是<span />

\n\n

<label />具有for针对特定输入字段的属性。因此，单击标签将使输入元素聚焦。

\n\n

注意：输入的id 值必须与value 的<input id="label-check" />标签相同。<label for="label-check">

\n\n

HTML：

\n\n

<label for="label-check">\n    <input type="checkbox" id="label-check" style="vertical-align: middle;"/> Nie pytaj wi\xc4\x99cej...\n</label>\n

\n\n

JS：

\n\n

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

\n\n

CSS：

\n\n

label {\n    cursor: pointer;\n}\n

\n\n

活生生的例子

\n