下面小编就为大家带来一篇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"> </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"> </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>

以上这篇jquery 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考