jquery实现全选、反选、取消全选功能代码

江山如画 • 2018年10月17日 pm1:24 • 网页制作 • 阅读 742

管理系统后台，商品管理、信息管理等，需要删除，为方便操作应该提供全选、反选、取消全选功能。

今天中文网页设计分享jquery实现全选、反选、取消全选功能代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <title>jquery实现全选、反选、取消全选功能代码|www.125jz.com</title> <style type="text/css"> li{ font-size: 16px; list-style:none; height:30px; } </style> </head> <body> <ul id="list"> <li> <label> <input type="checkbox" value="1"> 1.中文网页设计</label> </li> <li> <label> <input type="checkbox" value="2"> 2.网页制作</label> </li> <li> <label> <input type="checkbox" value="3"> 3.建站之家</label> </li> <li> <label> <input type="checkbox" value="4"> 4.网站爱好者</label> </li> <li> <label> <input type="checkbox" value="5"> 5.网页设计论坛</label> </li> <li> <label> <input type="checkbox" value="6"> 6.网页制作社区</label></li></ul> <input type="checkbox" id="all"> <input type="button" value="全选"class="btn" id="selectAll"> <input type="button" value="全不选"class="btn" id="unSelect"> <input type="button" value="反选"class="btn" id="reverse"> <script> $(function(){ 　　//全选或全不选　　$("#all").click(function(){ 　　　　if(this.checked){ 　　　　　　$("#list :checkbox").attr("checked",true); 　　　　}else{ 　　　　　　$("#list :checkbox").attr("checked",false); 　　　　} 　　}); 　　//全选　　$("#selectAll").click(function(){ 　　　　$("#list :checkbox,#all").attr("checked",true); 　　}); 　　//全不选　　$("#unSelect").click(function(){ 　　　　$("#list :checkbox,#all").attr("checked",false); 　　}); 　　//反选***** 　　$("#reverse").click(function(){ 　　　　$("#list :checkbox").each(function(){ 　　　　　　$(this).attr("checked",!$(this).attr("checked")); 　　　　}); 　　　　allchk(); 　　}); 　　//设置全选复选框　　$("#list :checkbox").click(function(){ 　　　　allchk(); 　　}); 　　}); 　　function allchk(){ 　　var chknum = $("#list :checkbox").size();//选项总个数　　var chk =0; 　　$("#list :checkbox").each(function(){ 　　　　if($(this).attr("checked")==true){ 　　　　　　chk++; 　　　　} 　　}); 　　if(chknum==chk){//全选　　　　$("#all").attr("checked",true); 　　}else{//不全选　　　　$("#all").attr("checked",false); 　　} } </script> </body> </html>

提示：你可以先修改部分代码再运行。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2794.html