Question

我在span容器中有一个复选框。使用以下代码，我可以在单击span标记时成功切换复选框。但是，单击复选框本身时会失败。

    $(function(){
        $("span").click(function(e){
            if ($(this).find("input[name='test']").attr('checked') == true)
            {
                $(this).find("input[name='test']").removeAttr('checked') ;
            }
            else
            {
                $(this).find("input[name='test']").attr('checked', 'checked') ;
            }
        }) ;

    }) ;

为什么会这样？我该如何解决这个问题？

Answer 1

.attr('checked') == true

jQuery 1.6.2向此返回'false'，因为.attr（'checked'）=='checked'

我建议进行一些重构：

$(function(){
    $("span").click(function(e) {
        var chk = $(this).find("input[name='test']");
        if (chk.is(':checked')) {
            chk.removeAttr('checked') ;
        }
        else {
            chk.attr('checked', 'checked') ;
        }
    });
});

Answer 2

您的问题是，当单击复选框本身时，点击事件会冒泡到<span>，然后取消操作。 This fiddle reproduces the problem（单击复选框本身不会切换其状态，因为该函数会取消默认的复选框行为）。

快速解决方法是在单击复选框时使用.stopPropagation()来阻止事件冒泡。例如：

$("span").click(function(e) {
    var chk = $(this).find("input[name='test']");
    chk.prop('checked', !chk[0].checked); /* assume only 1 checkbox */
}).find("input[name='test']").click(function(e) {
    e.stopPropagation();
});

See this in action

或者，检查点击目标以查看单击了哪个元素，并且仅在未单击复选框本身时切换状态。 E.g。

$("span").click(function(e) {
    if (e.target.type != "checkbox") {
        var chk = $(this).find("input[name='test']");
        chk.prop('checked', !chk[0].checked);
    }
});

See this in action

请注意，从jquery 1.6开始，您应该使用.prop(checked)而不是.attr()。

Answer 3

$("span").click(function() {
    $("input[name='test']", this).prop('checked', $("input[name='test']",this).prop('checked') ? false: true);
});

我的复选框在span容器中出了什么问题？

3 个答案: