用JQuery实现全选、全不选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#allOrNone').click(function () {
                //点击“选择状态”，实现全选与全不选
                $(':checkbox').attr('checked', $(this).attr('checked'));
            });

            //当改变了上面选择项的选中状态后，“选择状态”的状态也跟着改变
            $(':checkbox[id!=allOrNone]').click(function () {
                optionStateChanged();
            });

            //选项改变抽象的方法
            function optionStateChanged() {
                var state = true;
                $(':checkbox[id!=allOrNone]').each(function () {
                    if (!$(this).attr('checked')) {
                        state = false;
                        return false;
                        //break;   不可以使用break；
                    }
                });

                //如果有一个没有被选中，则将“选择状态”的状态也设置为没有选中状态
                $('#allOrNone').attr('checked', state);
            }

            //反选
            $('#chooseReverse').click(function () {
                //进行选项的反选工作
                $(':checkbox[id!=allOrNone]').each(function () {
                    $(this).attr('checked', !$(this).attr('checked'));
                });

                //单独考虑选项改变的操作
                optionStateChanged();
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" value="1" />足球
    <input type="checkbox" value="2" />足球
    <input type="checkbox" value="3" />足球
    <input type="checkbox" value="4" />足球
    <input type="checkbox" value="5" />足球<br />
    <input type="checkbox" name="name" value="" id="allOrNone" />选择状态    
    <input type="button" name="name" value="反选" id="chooseReverse" />
</body>
</html>
秒客网

用JQuery实现全选、全不选、反选

相关文章
