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>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17