全选，反选，全不选

最新推荐文章于 2022-03-18 11:07:09 发布

原创最新推荐文章于 2022-03-18 11:07:09 发布 · 461 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript实现网页元素的全选、反选和不选功能，包括全选按钮、反选按钮和全不选按钮的实现原理和代码解析。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>全选，反选，不选</title>

$(function () {

            //一:全选功能
            $("#selAll").click(function () {
                $("#playlist :checkbox").attr("checked", true); //#playlist :checkbox中间的空格不能省略
            });
            //二:全不选功能
            $("#unselAll").click(function () {
                $("#playlist :checkbox").attr("checked", false); //就好像使用js中的通过attribute方法来设置一个属性一样
            });

//三:反选功能
$("#reverse").click(function () {

//alert($("#playlist :checkbox").attr("checked")); //取到的始终都是第一个选中的值
//$("#playlist :checkbox").attr("cecked",!$("#playlist :checkbox").attr("checked"));//不可以，要理解迭代的工作过程

                $("#playlist :checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"))//选中状态是这个选中状态的相反
                });

//下面是错误的写法，没有想的这么简单
//$("#playlist:checkbox").attr("checked", false);

});

        })

    </script>

</head>
<body>

</div>

</body>
</html>