javascript - jQuery/JavaScript : Check all checkboxes and Check each checkbox to display div

Question

我很难弄明白这一点。我试图制作一个全局复选框，它将检查所有其他子复选框并显示一个 div，这工作正常，但问题是当我尝试让每个子复选框检查并显示 div 本身时。

我为它编写了 jquery hide and show。

当我选中第一个子复选框并选中第二个时； div 显示，但是当我返回并取消选中第一个时，由于隐藏和显示功能，div 关闭并打开，我该怎么做？

下面是我的代码。

<script>
$(document).ready(function(){
    $('#checkbox-global').click(function(){
        if($(this).is(':checked'))
            $('.checkbox-group').prop('checked', true);
        else
            $('.checkbox-group').prop('checked', false);
    });
});

$(document).ready(function(){
    $('#checkbox-global').click(function(){
        if($(this).is(':checked'))
            $('.loaded').show(1000);
        else
            $('.loaded').hide(1000);
    });
});

$(document).ready(function(){
    $('.checkbox-group').click(function(){
        if($(this).is(':checked'))
            $('.loaded').show(1000);
        else
            $('.loaded').hide(1000);
    });
});

     <!-- The Div -->
      <div class="loaded">RESTORE | DELETE</div>

    <!-- The Global Checkbox -->
    <input type="checkbox" id="checkbox-global" class="checkbox-group">
    <br>

    <!-- The Sub-checkboxes -->
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">

Answer 1

不需要多次使用document.ready，一次就够了。这是为了确保所有 DOM 结构都准备就绪，并且您可以在此时获得所需的元素。

以下是需要考虑的要点
1) 无需为checkedLength 绑定(bind)两次点击事件，您可以将复选框选中/取消选中和div 显示/隐藏逻辑放在同一个点击事件处理程序中。
2) 您可以从 checkbox-group 检查是否有任何其他复选框被选中，如果没有被选中则隐藏 div 否则显示它。

$(document).ready(function(){
    $('#checkbox-global').click(function(){
        // check uncheck checkbox as per checked status
        $('.checkbox-group').prop('checked', $(this).is(':checked'));

        //show hide div
        if($(this).is(':checked'))
           $('.loaded').show(1000);
        else
          $('.loaded').hide(1000);
    });

    $('.checkbox-group').change(function(){
        //check if checkbox-group have atleast one checkbox checked
        var checkedLength =  $('.checkbox-group:checked').length;
        if(checkedLength > 0)
          $('.loaded').show(1000);
        else
         $('.loaded').hide(1000);
    });
});