Question

我有一个过滤器，里面有很多checbox。我可以通过单击复选框标签来切换复选框。但是，当我单击屏幕上的任意位置时，我还需要关闭复选框的div。

我已经尝试过了。我可以通过单击标签显示div，但只能通过从标签div中单击来关闭它。我还需要照常单击标签div来关闭它。

//label div to toggle the checkbox
<div class="at-col-default-mar pricing_inputfield" id="semt">
    <input class="semtim inputarka1" type="text" disabled value="  Semt" id="semtarki">
    <i class="fa fa-caret-down"></i>
</div>

//checkbox div
<div style="display:none" id="semt1" class="at-col-default-mar pricing_inputfield">
    <div style="width: 200px; height: 300px; overflow-y: scroll;" class="at-col-default-mar">
        <div style="margin-top: 5px;" class="check-box">
            <input style="float: left;" class="semtim textboxx" type="checkbox" name="city" id="semtt1">  
            <label style=" padding-left: 10px; float: left;" for="semtt1">Name</label>
        </div>
    </div>
</div>



<script>
//below is to toggle the checkbox from label div
$(document).ready(function() {

    $("#semt").click(function() { //label div id

        $("#semt1").toggle(); //checkbox div id
    })

//below is to close the checkbox div out of label div
        $(document).mouseup(function(e) 
         {
            var container = $("#semt1"); //checkbox div id

            if (!container.is(e.target) && container.has(e.target).length === 0) 
            {
                container.hide();
            }
        });

//below is to toggle the checkbox from label div
    $(document).ready(function() {

        $("#semt").click(function() { //label div id

            $("#semt1").toggle(); //checkbox div id
        })

//below is to close the checkbox div out of label div
        $(document).mouseup(function(e) 
         {
            var container = $("#semt1"); //checkbox div id

            if (!container.is(e.target) && container.has(e.target).length === 0) 
            {
                container.hide();
            }
        });
</script>

Answer 1

解决了这个问题，尝试了多种组合后，

 .yoket: {
display:none;
}

    $(document).mouseup(function(e) 
         {
            var container = $("#semt");
            var container1 = $("#semt1");

            if (container.has(e.target).length === 1)
                {
                    if (container1.hasClass("yoket")) {

                        container1.removeClass("yoket");  
                    }
                    else if (!container1.hasClass("yoket")) {

                        container1.addClass("yoket");
                    }
                }

            else  if (container1.has(e.target).length === 0)
                {

                    container1.addClass("yoket");            
                }           
        });

复选框与jQuery切换和隐藏切换出div

1 个答案: