Question

I’ve set the click event on a parent row of a div to select the child checkbox when clicked. The problem is that when you click the actual checkbox, the parent click overrides the checkbox click event, which prevents the checkbox from checking.

I’m not sure how to solve this problem other than changing the entire solution so that the checkbox is no longer a child of the parent div? The table rows are dynamically generated, so there is a variable number.

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");
    }
}

I’ve created an example here: http://jsfiddle.net/6sStE/3/

UPDATE:

I was able to resolve this problem by adding an onmouseup event to the actual checkbox. This is probably not the most elegant solution, so please feel free to post alternatives if you have one. Thanks!

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

Answer 1

You may try this

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

Remove the inline event onmousedown="$.SelectChild(this);" from the divs and also consider to upgrade the jQuery version.

EXAMPLE.