jquery - 用户无法检查输入，当 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/

尝试只点击输入，然后点击输入附近的文本。

我什至尝试复制切换开关并将其移动到父对象之前，但没有成功。

这不是什么大问题，因为脚本可以运行，但它会误导人们，使点击次数过多。

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

Answer 1

根据@Musa 的建议使用 <label />而不是 <span />

<label />有for属性来定位特定的输入字段。所以点击标签将聚焦输入元素。

注意:输入<input id="label-check" /> id 值必须与标签 <label for="label-check"> 相同为了值(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