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 全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。