JQuery的全选,全不选,反选!-阿里云开发者社区

开发者社区> 开发与运维> 正文

JQuery的全选,全不选,反选!

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<!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>
    
<link rel="stylesheet" type="text/css" href="Css/Commom.css" />
    
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    
<script language="javascript" type="text/javascript">

        $(
function () {
            $(
"#selAll").click(function () {
                $(
".column :checkbox").attr("checked"true);
            });

            $(
"#unSelAll").click(function () {
                $(
".column :checkbox").attr("checked"false);
            });

            $(
"#reverSel").click(function () {
                
//遍历.column 下的 checkbox;
                $(".column :checkbox").each(function () {
                    
//给当前勾选的checkbox取反;  其中!$(this).attr("checked")是先获取他的属性,再取反,充当第二个参数;
                    //attr方法只有一个参数时是取值,两个参数时是设值;
                    $(this).attr("checked"!$(this).attr("checked"));
                });
            });
        });

    
</script>
</head>
<body>
    
<div class="column">
        
<input id="Checkbox1" type="checkbox" value="修改密码" />
        修改密码
        
<input id="Checkbox2" type="checkbox" value="评论管理" />
        评论管理
        
<input id="Checkbox3" type="checkbox" value="删除文章" />
        删除文章
        
<input id="Checkbox4" type="checkbox" value="删除用户" />
        删除用户
        
<input id="Checkbox5" type="checkbox" value="备份数据" />
        备份数据
    
</div>
    
<div class="column">
        
<input id="selAll" type="button" value="全选" />
        
<input id="unSelAll" type="button" value="全不选" />
        
<input id="reverSel" type="button" value="反选" />
    
</div>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章