0

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

除了更改整个解决方案以使复选框不再是父 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);
}
4

2 回答 2

0

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

使用.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);
        }
    });

});

检查小提琴

于 2012-12-04T20:39:50.750 回答
0

你可以试试这个

$(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.

示例。

于 2012-12-04T20:28:30.513 回答