JQuery如何覆蓋父級點擊的默認複選框點擊事件？

我已經在div的父行上設置了click事件來點擊時選中子複選框。問題在於，當您單擊實際複選框時，父級單擊將覆蓋複選框單擊事件，這會阻止複選框檢查。JQuery如何覆蓋父級點擊的默認複選框點擊事件？

我不知道如何解決這個問題，而不是改變整個解決方案，使複選框不再是父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/

UPDATE：

我能夠通過添加onmouseup事件實際複選框來解決此問題。這可能不是最優雅的解決方案，所以請隨時發佈替代品，如果你有一個。謝謝！

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

來源

2012-12-04 soundbender

你可以試試這個

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

來源

2012-12-04 20:28:30

很好的例子！謝謝。我還有一個問題是當用戶離開頁面時保留所選複選框的狀態，然後單擊後退按鈕。任何想法如何實現？ – soundbender

取出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

來源

2012-12-04 20:39:50

感謝您的解決方案。 – soundbender

JQuery如何覆蓋父級點擊的默認複選框點擊事件？

回答

相關問題