复选框全选全不选反选实现

最新推荐文章于 2023-10-23 14:09:15 发布

waveclouds

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量223

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/waveclouds/article/details/78953364

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript" src="./jquery-1.4.4.js"></script>
        <script type="text/javascript">
        function selAll(){
            //全选  $('li').css('color','red');
            //jquery内部大部分方法本身有“遍历”机制，可以为每个元素节点对象进行相关的功能操作
            $('.hby').attr("checked",true);
        }
        function selNotAll(){
            //全不选
            $('.hby').attr('checked',false);
        }
       function selFan(){
            //反选
            //遍历全部的复选框，查看每个项目的选中状态，并做处理(选中就取消，否则设置选中)
            for(var i=0; i<$('.hby').length; i++){
                var flag = $('.hby:eq('+i+')').attr('checked');
                $('.hby:eq('+i+')').attr('checked',!flag);
            }
        }
        </script>
    </head>
    <body>
        <h2>复选框选中操作</h2>
        爱好(复选框):
        <input type="checkbox" class="hby" name="hobby[]" value="1" />篮球
        <input type="checkbox" class="hby" name="hobby[]" value="2" />看书
        <input type="checkbox" class="hby" name="hobby[]" value="3" />上网
        <input type="checkbox" class="hby" name="hobby[]" value="4" />听音乐
        <br /><br />
        <input type="button" value="全选" οnclick="selAll()" />
        <input type="button" value="全不选" οnclick="selNotAll()" />
        <input type="button" value="反选" οnclick="selFan()" />
    </body>
</html>