Question

我的页面中有一个复选框。检查时，应检查其他复选框。当我取消选中它时，所有其他复选框也应该取消选中。我怎么能用jQuery做到这一点？或者简单的HTML就足够了？FIDDLE

    <div>Select All<input type="checkbox" checked="true"></div> 
    1.<input type="checkbox"> 
    2.<input type="checkbox"> 
    3.<input type="checkbox"> 
    4.<input type="checkbox"> 
    5.<input type="checkbox">

Answer 1

Usig jQuery 你可以这样做

<强> HTML：

<input id='selectall' type="checkbox" checked="true">

<强> JS：

$('#selectall').change(function () {
    if ($(this).prop('checked')) {
        $('input').prop('checked', true);
    } else {
        $('input').prop('checked', false);
    }
});
$('#selectall').trigger('change');

在fiddle

中查看此内容

Answer 2

试试这个，

<div>Select All<input type="checkbox" id="parent" /></div> 
  1.<input type="checkbox" class="child"> 
  2.<input type="checkbox" class="child"> 
  3.<input type="checkbox" class="child"> 
  4.<input type="checkbox" class="child"> 
  5.<input type="checkbox" class="child"> 

<script>
    $(function(){
      $('#parent').on('change',function(){
         $('.child').prop('checked',$(this).prop('checked'));
      });
      $('.child').on('change',function(){
         $('#parent').prop('checked',$('.child:checked').length ? true: false);
      });
    });
</script>

Fiddle

你可以实现它，

$(function() {
  $('#parent').on('change', function() {
    $('.child').prop('checked', this.checked);
  });
  $('.child').on('change', function() {
    $('#parent').prop('checked', $('.child:checked').length===$('.child').length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Select All<input type="checkbox" id="parent" /></div>
1.<input type="checkbox" class="child"> 2.
<input type="checkbox" class="child"> 3.
<input type="checkbox" class="child"> 4.
<input type="checkbox" class="child"> 5.
<input type="checkbox" class="child">

Answer 3

你可以试试这个：

            <html>
            <head>
            <script type="text/javascript">
            function toggleGroup(id) {
                var group = document.getElementById(id);
                var inputs = group.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = (inputs[i].checked) ? false : true;
                }

            }
            window.onload = function() {
            document.getElementById("checkmain").onchange = function() {
               toggleGroup("check_grp");

            }
            }
            </script>
            </head>
            <body>
             <form name="form1" >
                <input type="checkbox" name="checkmain" id="checkmain" /><br />
                <p id="check_grp">
                     <input type="checkbox" /><label for="check1">check 1</label>
                     <input type="checkbox"  /><label for="check2">check 2</label>
                     <input type="checkbox"  /><label for="check3">check 3</label>
                     <input type="checkbox"  /><label for="check4">check 4</label>
                     <input type="checkbox"  /><label for="check5">check 5</label>
                </p>
            </form>
            </body>
            </html>

Answer 4

<div>Select All<input id= "all" type="checkbox" checked="true" />
    </div> 
1.<input class='checkbox' type="checkbox"> 
2.<input type="checkbox"class='checkbox'> 
3.<input type="checkbox"class='checkbox'> 
4.<input type="checkbox"class='checkbox'> 
5.<input type="checkbox"class='checkbox'> 

$(document).ready(function(){
    $("#all").change(function(){
        $('.checkbox').prop('checked', $(this).prop('checked'));
    });
});

fiddle

Answer 5

对HTML进行了一些更改：

<div>Select All<input type="checkbox" checked="true" onChange='f.update(this)'/>
</div> 
 <div id="target">
   1.<input type="checkbox"/> 
   2.<input type="checkbox"/> 
   3.<input type="checkbox"/> 
   4.<input type="checkbox"/> 
   5.<input type="checkbox"/> 
</div>

jQuery的：

var f=(function(){
    return{
       update:function(t){
          if($(t).is(':checked'))
           {            
                $('#target input[type=checkbox]').prop('checked',true);
           }else{$('#target input[type=checkbox]').prop('checked',false);}
       }
    }
})();

Answer 6

结帐

<div>Select All<input id="all" type="checkbox" checked="true"></div>

然后

jQuery(function($){
    var $all = $('#all').change(function(){
        $checkboxes.prop('checked', this.checked);
    });
    var $checkboxes = $('input[type="checkbox"]').not($all).change(function(){
        $all.prop('checked', $checkboxes.not(':checked').length == 0);
    });
    $checkboxes.eq(0).change();
})

演示：Fiddle

选中一个框后，选中其他复选框

6 个答案: