Question

复选框无法选中或取消选中，直接点击复选框？

我创建了点击div toggle已选中/未选中复选框。这个功能最好。

但是当我试图直接点击复选框时，我无法选中或取消选中复选框。

我该怎么做？

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

Here's a fiddle

Answer 2

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

问题是当你直接点击复选框时它首先运行checked_all_or_uncheck_all_fn()方法，但它也执行onclick_cover_checkbox_fn()方法（你不需要）因为div也会收到点击事件。所以如果你检查然后方法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

复选框无法选中或取消选中，直接点击复选框？

2 个答案:

Here's a fiddle