代码描述:jQuery实现复选框 全选取消。jQuery实现复选框全选取消源码实例
在实际应用中,尤其是网站的后台管理中,经常有这样的功能,对提高网站的可操作性有着很大的巨大的益处,下面就通过一个实例简单介绍一下如何利用jQuery实现此效果。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> li { list-style-type: none; font-size: 12px; color: blue; width: 300px; height: 20px; line-height: 20px; } a { width: 200px; height: 20px; float: left; } .ck { float: left; width: 26px; } .time { color: red; width: 60px; height: 20px; float: right; } .do { font-size: 12px; } </style> <script type="text/javascript" src="https://www.51qianduan.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#myck").bind("click", function () { $('input[type=checkbox]').prop('checked', $(this).prop('checked')); if ($(".do").text() == "全选") { $(".do").text("取消"); } else { $(".do").text("全选"); } }) }) </script> </head> <body> <div> <ul> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">51前端欢迎您</a> <span class="time">2012-12-13</span> </li> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">大家好,好久不见了</a> <span class="time">2012-12-13</span> </li> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">51前端</a> <span class="time">2012-12-13</span> </li> </ul> <div><input type="checkbox" id="myck" /><span class="do">全选</span></div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能