JQuery 实现checkbox全选功能和全不选功能，我们经常在项目开发中用到这个功能，特意记录下来，方便随时使用

一、HTML代码如下：

<!--设置全选复选框-->
<input id="check-all" name="check-all" type="checkbox" />全选
<!--设置子复选框-->
<input name="check-one" type="checkbox" />item 1
<input name="check-one" type="checkbox" />item 2
<input name="check-one" type="checkbox" />item 3
<input name="check-one" type="checkbox" />item 4

二、js 代码如下：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

        //全选、取消全选的事件
        $('#check-all').click(function () {
            if ($("#check-all").prop("checked")) {
                $("input[type='checkbox'][name='check-one']").prop("checked",true);   //全选
            } else {
                console.log(3);
                $("input[type='checkbox'][name='check-one']").prop("checked",false);  //取消全选
            }
        });


        //子复选框的事件
        $($("input[type='checkbox'][name='check-one']")).click(function () {

            //当没有选中某个子复选框时，SelectAll取消选中
            if (!$(this).checked) {
                $("#check-all").prop("checked", false);
            }
            var chsub = $("input[type='checkbox'][name='check-one']").length; //获取subcheck的个数
            var checkedsub = $("input[type='checkbox'][name='check-one']:checked").length; //获取选中的subcheck的个数
            if (checkedsub == chsub) {
                $("#check-all").prop("checked", true);
            }

        })

</script>

三、效果图