选中一个框时选中其他复选框答案

【问题标题】：Check other checkboxes when check one box选中一个框时选中其他复选框
【发布时间】：2013-10-11 01:38:36
【问题描述】：

我的页面中有一个复选框。当我选中它时，应该选中其他复选框。当我取消选中它时，所有其他复选框也应该取消选中。如何使用 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">

【问题讨论】：

Check all checkboxes with jquery的可能重复
可能Duplicate

标签： jquery html checkbox

【解决方案1】：

使用 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查看这个

【讨论】：

当我取消选中全选时，我希望其他人也取消选中
@Benny 我已经更新了我的答案和小提琴，检查一下
当 1/2/3/4/5 之一未选中时，我可以取消选中 selecctall 吗？
反对票！！请尝试分享一些原因，以便我们学习/纠正它。

【解决方案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">

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

click 不适合复选框/单选按钮。你应该尝试使用change 事件。最好使用.prop 而不是.attr

【解决方案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);}
       }
    }
})();

【讨论】：

【解决方案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

【讨论】：