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

最新推荐文章于 2024-05-13 02:03:57 发布

joyhen

最新推荐文章于 2024-05-13 02:03:57 发布

阅读量1.6k

点赞数

分类专栏： C# 文章标签： JQuery 全选反选

本文链接：https://blog.csdn.net/Joyhen/article/details/9698325

版权

C# 专栏收录该内容

270 篇文章 3 订阅

订阅专栏

<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>

joyhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JQuery实现全选、全不选、反选

$(function () { $('#allOrNone').click(function () { //点击“选择状态”，实现全选与全不选 $(':checkbox').attr('checked', $(this).attr('checked')); });
复制链接

扫一扫

专栏目录