jquery 全选、全不选、反选的实现代码

发布时间:2020-07-19编辑:脚本学堂
本文介绍下,用jquery实现的全选、全不选、反选的代码,供大家学习参考。

jquery实现全选/全不选/反选。
   
首先:引入jquery
 

复制代码 代码示例:
<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->
 

样式:
 

复制代码 代码示例:
<styletype="text/css">
<!--
#div1{
    width:980px;
    margin:0 auto;
    position:relative;
    text-align:left;
    padding-left:400px;
    line-height:30px;
    border:1px dotted #0075c5;
}
li{
    display:block;
    list-style:none;
    float:left;
    position:relative;
    padding-left:20px;
}
.clr{
    height:20px;
}
-->
</style>
 

body布局:
 

复制代码 代码示例:
<divid="div1">
    <divclass="clr">&nbsp;</div>
    <!--选项开始-->
    <inputtype="checkbox"/><ahref="haran.info">haran.info_脚本编程</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_网站编程</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_系统管理</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_服务器配置</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_系统运维</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/>
      
    <inputtype="checkbox"/><ahref="haran.info">haran.info_首页</a><br/>
    <!--选项结束-->
    <!--功能按钮开始-->
    <inputtype="button"id="selAll"value="全选"/>
      
    <inputtype="button"id="unselAll"value="全不选"/>
      
    <inputtype="button"id="reverse"value="反选 "/>
    <!--功能按钮结束-->
    <divclass="clr">&nbsp;</div>
</div><!--关闭div1-->

实现功能:
 

复制代码 代码示例:
<scripttype="text/javascript">
$(document).ready(function () {
          
    $("#selAll").click(function () { //":checked"匹配所有的复选
        $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
    });
          
    $("#unselAll").click(function () {
        $("#div1 :checkbox").attr("checked", false);
    });
          
    //理解用迭代原理each(function(){})
    $("#reverse").click(function () {
    $("#div1 :checkbox").each(function () {
    $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态:如果选中则取反
        });
    });
});
</script>