jquery 全选、全不选、反选效果的实现代码【推荐】
jquery全选、全不选、反选效果的实现代码【推荐】
首先：引入jquery
<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"/> <scriptsrc="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!--引入Jquery-->
样式：
<styletype="text/css">
<!--
#div1{
width:980px;
margin:0auto;
position:relative;
text-align:left;
padding-left:400px;
line-height:30px;
border:1pxdotted#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全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。