复选框不能通过直接单击复选框来选中或取消选中

checkbox can not checked or uncheck by directly click on checkbox?

本文关键字：复选框 取消 不能 单击      更新时间：2023-09-26

复选框不能通过直接单击复选框来选中或取消选中？

我正在为选中/未选中复选框创建单击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>

下面是 jquery 中的一个例子：

绑定change处理程序，然后取消选中除选中的复选框之外的所有复选框：

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

这是一个小提琴

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

问题是当您直接单击复选框时，它首先运行checked_all_or_uncheck_all_fn()方法，然后它也执行onclick_cover_checkbox_fn()方法（您不需要），因为div 也会收到点击 event.so 如果您选中，那么方法onclick_cover_checkbox_fn()方法将取消选中它.为了避免这种情况，您需要在checked_all_or_uncheck_all_fn()方法中传播 swrapd stop事件。

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

对于跨浏览器停止传播，请阅读此 http://javascript.info/tutorial/bubbling-and-capturing

相关文章：