Question

我很难搞清楚这一点。我试图创建一个全局复选框，它将检查所有其他子复选框并显示一个div，它工作正常，但问题是当我尝试使每个子复选框检查并显示div本身。

我写了jquery hide并为它显示。

当我检查第一个子复选框时，检查第二个子复选框; 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绑定点击事件两次，您可以在同一个点击事件处理程序中选中复选框选中/取消选中和显示/隐藏逻辑。
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);
    });
});

Answer 2

您必须检查是否选中了任何复选框，如果是，则不要隐藏div 以下是示例代码：

$(document).ready(function(){

$('#checkbox-global').click(function(){
    if($(this).is(':checked')){
        $('.checkbox-group').prop('checked', true);
        $('.loaded').show(1000);
    }
    else {
        $('.checkbox-group').prop('checked', false);
        $('.loaded').hide(1000);
    }
});

   $('.checkbox-group').click(function(){
       var cnt = $(".checkbox-group:checked").length;
      if(cnt > 0)
         $('.loaded').show(1000);
      else
         $('.loaded').hide(1000);
    });
});

Answer 3

尝试this code：

<强> HTML

<!-- 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">

<强>的jQuery

$(function () {
    $(".loaded").hide();
    $("#checkbox-global").click(function () {
        if ($("#checkbox-global").is(":checked")) {
            $(".checkbox-group").prop("checked", true);
        } else {
            $(".checkbox-group").prop("checked", false);
        }
    });

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

Answer 4

试试这个

$(document).ready(function(){
    var c = $('.checkbox-group').size();  //This line is used to count checkbox
    $('#noc').html(c);
    $('#checkbox-global').click(function(){
        if($(this).is(':checked')) {
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
            $('.checkbox-group').prop('checked', true);
            $('.loaded').show();
        }
        else {
            $('.checkbox-group').prop('checked', false);
            $('.loaded').hide();
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
        }  
    });

    $('.checkbox-group').click(function(){
        var tom = $('#checkbox-global').is(':checked');
        if(tom == true || $('.checkbox-group').is(':checked')) {
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
            console.log($(":checked").size());  //This line is used to count checked checkbox
            $('.loaded').show();
        }
        else{
            $('.loaded').hide();
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
        }
     });
});

Answer 5

$(function() {

    var checked = true;

    $("#all_check").on("change", function() {

        checked = $(this).is(':checked');

        if (checked) {

          $('.dg-img').prop('checked', true);

        }

         else

         {

        $('.dg-img').prop('checked', false);

         }

    });

jQuery / JavaScript：选中所有复选框并选中每个复选框以显示div

5 个答案: