復選框不能通過直接單擊復選框來選中或取消選中？

Question

復選框不能通過直接單擊復選框來選中或取消選中？

我被創建時，單擊div以toggle選中/未選中復選框。 這個功能是最好的。

但是，當我嘗試直接單擊復選框時，我無法選中或取消選中復選框。

我怎樣才能做到這一點 ？

https://jsfiddle.net/jddwxtst/

<script>
function onclick_cover_checkbox_fn(){
    var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
    var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;

    if(main_checkbox_checked_uncheck_var_checked_status != true)
    {
        document.getElementById("main_checkbox_checked_uncheck").checked = true;
        checked_all_or_uncheck_all_fn();
    }
    else
    {
        document.getElementById("main_checkbox_checked_uncheck").checked = false;
        checked_all_or_uncheck_all_fn();
    }
}
</script>

<script>
function checked_all_or_uncheck_all_fn(){
    alert("5555");
}
</script>

Answer 1

這是jquery中的一個示例：

綁定change處理程序，然后僅取消選中所有復選框，除了選中的復選框之外：

$('input.example').on('change', function() {
    $('input.example').not(this).prop('checked', false);  
});

這是一個小提琴

Answer 2

這是更新的工作示例https://jsfiddle.net/jddwxtst/2/

問題是當您直接單擊復選框時，它首先運行checked_all_or_uncheck_all_fn()方法，但隨后它也執行onclick_cover_checkbox_fn()方法（您不需要），因為div也會收到click事件。因此，如果選中，則方法onclick_cover_checkbox_fn()方法將取消選中該選項。為避免這種情況，您應屏蔽在checked_all_or_uncheck_all_fn()方法中傳播的停止事件。

function checked_all_or_uncheck_all_fn(e){
    alert("5555");
   // stop event propagating 

}

對於跨瀏覽器停止傳播，請閱讀此http://javascript.info/tutorial/bubbling-and-capturing