全选 取消全选 反选 

<html>
　　<head>
    <meta name="name" content="content" charset="utf-8">
　　　　<script src="jquery-3.0.0.js"></script>
　　</head>
　　<body>
　　　　<form>
　　　　　　<input type="checkbox" name="txt">123
　　　　　　<input type="checkbox" name="txt">123
　　　　　　<input type="checkbox" name="txt">123
　　　　　　<input type="checkbox" name="txt">123
            <input type="checkbox" name="all" value="">全选
            <input type="button" name="reverse" value="反选">
　　　　</form>
    <script>
        $('input[name=all]').on('change',function(){
            var check = $('input[name=all]').is(':checked');
            if(check){
                $('input[name=txt]').each(function(){
                    $(this).prop('checked',true);
                })
            }else{
                $('input[name=txt]').each(function(){
                    $(this).prop('checked',false);
                })
            }
        })
        function check(){
            var check = 0,uncheck = 0;
            $('input[name=txt]').each(function(){
                if($(this).is(':checked')){
                    check += 1;
                }else{
                    uncheck += 1;
                }
                if(uncheck){
                    $('input[name=all]').prop('checked',false);
                }
            })
            if(!uncheck){
                $('input[name=all]').prop('checked',true);
            }
        }
        $('input[name=txt').on('change',function(){
            check();
        })
        $('input[name=reverse]').click(function(){
            $('input[name=txt]').each(function(){
                if($(this).is(':checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }
            })
            check();
        })
    </script>
　　</body>
</html>

 

posted @ 2016-08-31 17:55  蛋Mrs炒饭  阅读(181)  评论(0)    收藏  举报