如何使用 jQuery 在三个或更多条件下显示和隐藏元素？

Question

$(document).ready(function(){
  
    $(".counter-alert-box").hide();
    
        $('.scheme-checkbox').on("click", function () {
            $('.scheme-checkbox').is('checked', this.checked);
            $('.counter-alert-box').show();                        
        });
  
        //Alert Box Functionality : Show Alert Box on - first Checked
        $(".close-counter-box1").click(function () {
            $(".counter-alert-box").hide();
        });
  
        //Alert Box Functionality : Removes Selected Scheme
        $(".selected-scheme .close-icon-scheme").click(function () {
            $(this).parents('.selected-scheme').remove();
        });
  
    });

input[type=checkbox]{

position: absolute;
  right:20px;
  top:50px;
}

.counter-alert-box{
width:300px;
  height:250px;
  background-color:lightgray;
  position:fixed;
  left:30%;
  bottom:10px;
}

.close-counter-box1{
position:absolute;
  right:3px;
  top:1px;
  padding:3px;
  border:gray;
  background-color:lightgray;
  color:#000;
}

.close-counter-box1:hover{
background-color:lightgreen;
  color:red;
}

.selected-scheme{

}

.close-icon-scheme {
    color: #6C6C6C;
    /*background-color: #C0C0C0;*/
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin-right: 7px;
    padding:3px;
}

.close-icon-scheme:hover {
    color: #181818;
    background-color: #FFF;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>      
    <body>        
        <fieldset>
            <legend>Scheme 1</legend>
            <p>Scheme 1 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 2</legend>
            <p>Scheme 2 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 3</legend>
            <p>Scheme 1 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 4</legend>
            <p>Scheme 4 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>        
        <div class="counter-alert-box">
            <span class='close-counter-box1'>X</span>
            <div class='schemes-wrapper'>      
                <div class='selected-scheme'>Scheme 1
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 2
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 3
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 4
                    <span class='close-icon-scheme'>X</span>
                </div>
            </div>      
        </div>        
    </body>
</html>

我在 PHP 工作并使用 foreach 循环从数据库中获取数据。所以在fieldset上，它的内容来自于数据库。我正在使用 jQuery。

我想在 Counter-alert-box class 上工作以根据以下情况显示或隐藏但无法这样做请考虑以下情况并给出解决方案：

counter-alert-box 应该是 'Hide' :

当所有带有 class 方案复选框的复选框都将取消选中。
当所有选定的方案从 div class 方案包装器中删除时。
当点击 close-counter-box1 时

counter-alert-box 应该是 'show' 当至少有一个复选框被选中时。

Answer 1

请检查下面的内容 fiddle 看看。我想这会对你有所帮助...

    <fieldset>
    <legend>Scheme 1</legend>
    <p>Scheme 1 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 2</legend>
    <p>Scheme 2 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 3</legend>
    <p>Scheme 1 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 4</legend>
    <p>Scheme 4 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<div class="counter-alert-box"> <span class='close-counter-box1'>X</span>

    <div class='schemes-wrapper'>
        <div class='selected-scheme'>Scheme 1 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 2 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 3 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 4 <span class='close-icon-scheme'>X</span>

        </div>
    </div> <span id="cnt"></span>

</div>

$(document).ready(function () {
    $(".counter-alert-box").hide();
    $('.scheme-checkbox:checkbox').change(function () {
        if ($(':checkbox:checked').length > 0) {
            $('.counter-alert-box').show();
        } else {
            $('.counter-alert-box').hide();
        }
    });

    //Alert Box Functionality : Show Alert Box on - first Checked

    $(".close-counter-box1").click(function () {
        $(".counter-alert-box").hide();
        $('.scheme-checkbox').attr('checked', false);
    });

    //Alert Box Functionality : Removes Selected Scheme
    $(".close-icon-scheme").click(function () {
        $(this).parents('.selected-scheme').remove();
        if (!$('.selected-scheme').length) {
            $(".counter-alert-box").hide();
            $('.scheme-checkbox').attr('checked', false);
        }
    });

});


input[type=checkbox] {
    position: absolute;
    right:20px;
    top:50px;
}
.counter-alert-box {
    width:300px;
    height:250px;
    background-color:lightgray;
    position:fixed;
    left:30%;
    bottom:10px;
}
.close-counter-box1 {
    position:absolute;
    right:3px;
    top:1px;
    padding:3px;
    border:gray;
    background-color:lightgray;
    color:#000;
}
.close-counter-box1:hover {
    background-color:lightgreen;
    color:red;
}
.selected-scheme {
}
.close-icon-scheme {
    color: #6C6C6C;
    /*background-color: #C0C0C0;*/
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin-right: 7px;
    padding:3px;
}
.close-icon-scheme:hover {
    color: #181818;
    background-color: #FFF;
    cursor:pointer;
}

JSFiddle

如何使用 jQuery 在三个或更多条件下显示和隐藏元素？

How to show and hide an element in three or more conditions using jQuery?

checkbox

jquery

show-hide