Question

我在div的父行上设置了click事件，以便在单击时选中子复选框。问题是当您单击实际复选框时，父单击会覆盖复选框单击事件，这会阻止复选框检查。

除了更改整个解决方案以便复选框不再是父div的子项之外，我不确定如何解决此问题？表行是动态生成的，因此存在可变数字。

function SelectChildCheckBox(element) {
    var $chkBox = $(element).children().find("input:checkbox:first"),
        value = $chkBox.attr("checked");
    $chkBox.attr("checked", !value);

    if (!$chkBox.attr("checked")) {
        $(element).attr("class", "dg_row");
    }
    else {
        $(element).attr("class", "dg_row_sel");
    }
}

我在这里创建了一个示例：http://jsfiddle.net/6sStE/3/

更新

我能够通过在实际复选框中添加onmouseup事件来解决此问题。这可能不是最优雅的解决方案，所以如果您有替代方案，请随时发布替代方案。谢谢！

$.OnMouseUpChkBoxEvent = function(element) {
    var $chkBox = $(element)
    value = $chkBox.attr("checked");
    $chkBox.attr("checked", !value);
}

Answer 1

你可以试试这个

$(document).ready(function () {
    $('.dg_row').click(function(){
        var cb=$(this).find("input:checkbox:first");
        $(this).toggleClass("dg_row_sel dg_row");
        var cls=$(this).attr('class');
        if(cls=='dg_row_sel') cb.attr('checked', 'checked');
        else cb.removeAttr('checked');
    });
});

从div中删除内联事件onmousedown="$.SelectChild(this);"，并考虑升级jQuery version。

EXAMPLE

Answer 2

删除Inline events并使用jQuery关联它。

使用.prop()代替.attr()

$(document).ready(function() {
    $('.dg_row').on('mousedown', function(e) {
        var $element = $(this);
        var $chkBox = $element.children().find("input:checkbox:first");
        var value = $chkBox.prop("checked");
        $chkBox.prop("checked", !value);
        if ($chkBox.is(":checked")) {
            $element.addClass('dg_row_sel');
        }
        else {
            $element.removeClass('dg_row_sel');
        }
        if (e.target.tagName === 'INPUT') {
            $chkBox.prop("checked", value);
        }
    });

});

<强> Check Fiddle

JQuery如何在父点击时覆盖默认的复选框点击事件？

2 个答案: