检测元素外部的点击，检查复选框是否被选中，并触发点击

Detect click outside of element, check if checkbox is checked, and trigger click

本文关键字：检查 外部 元素 检测 复选框 是否      更新时间：2023-09-26

下面是我的HTML代码:

<input class="menu-btn" type="checkbox" id="menu-btn" />

下面是我的javascript代码:

$(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if($('.menu-btn').is(':checked')) { //line 3
                $('#menu-btn').trigger('click'); //line 4
            }
        }        
    })
})

第1行可以工作，第2行可以工作，第3行不能工作，它也不允许我选中复选框。为什么呢?

编辑:这是我想做的:

第1行用于检测是否有单击。第2行检测单击是否在#菜单之外，第3行检查menu-btn是否被选中。如果选中，那么第4行将触发menu-btn单击。问题是第3行不允许我检查复选框，如果它目前没有被选中。

你可以使用prop来选中复选框，而不是像$('#menu-btn').prop('checked', 'checked');那样触发点击事件，然后用$('#menu-btn').prop('checked', false);取消选中

切换代码:

$(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if(!$('#menu-btn').prop('checked')) { //line 3
                $('#menu-btn').prop('checked', 'checked'); //line 4
            } else {
                $('#menu-btn').prop('checked', false);
            }
        }        
    })
})

试试这个切换代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).click(function() {
        $('#menu-btn').trigger('click');
    });
});
</script>
<input class="menu-btn" type="checkbox" id="menu-btn" />
相关文章：