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

Question

我很难解决这个问题。我尝试创建一个全局复选框，以选中所有其他子复选框并显示一个div，这可以正常工作，但问题在于当我尝试使每个子复选框自己选中并显示该div时。

我为此编写了jquery的hide和show函数。

当我选中第一个子复选框并选中第二个时，div会显示，但是当我回去取消选中第一个后，div会因为hide和show函数而关闭，如此反复，我应该怎么做呢？

以下是我的代码。

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

- Sowemimo Bamidele

---

你想展示div在任何子复选框被点击时吗？请问具体的功能是什么？ - Bhadra

Answer 1

你不需要多次使用 document.ready，一次足够。这是为了确保DOM结构都已准备好，在此时可以获取所需的元素。

以下是需要考虑的几点：
1）没有必要为 checkedLength 绑定两次点击事件，可以将复选框选中/取消选中和 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);
    });
});

- Bhushan Kawadkar

---

您好，请问如何显示复选框的数目计数，当我勾选其中一个或全部时。 - Sowemimo Bamidele

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);
    });
});

- John

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);
        }
    });
});

- bodruk

---

你好，请问我怎样才能展示复选框的数量计数？当我选中其中一个或全部时。 - Sowemimo Bamidele

@SowemimoBamidele 使用jQuery的.size()方法。例如：$(":checked").size()返回选中元素的数量。http://api.jquery.com/size/ - bodruk

谢谢 bodruk。你救了我的一天。 - Sowemimo Bamidele

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);
        }
     });
});

- cheralathan

---

你好，请问我如何显示复选框的数量计数？当我勾选一个或全部时。 - Sowemimo Bamidele

你想要计算复选框的数量还是选中的复选框数量？ - cheralathan

我想要计算复选框的数量，并在每个被选中的复选框或全局复选框被选中时显示数字。 - Sowemimo Bamidele

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);

         }

    });

- dg07