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

あなたはこれを試すことができます

$(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 に答える
0

を削除し、Inline eventsjQueryを使用して関連付けます。

.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 に答える