如何使用jQuery实现复选框的全选和取消:
在实际应用中,尤其是网站的后台管理中,经常有这样的功能,对提高网站的可操作性有着很大的巨大的益处,下面就通过一个实例简单介绍一下如何利用jQuery实现此效果。
代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</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='/images/loading.gif' data-original="http://www.softwhy.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="#">蚂蚁部落欢迎您</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="#">蚂蚁部落</a> <span class="time">2012-12-13</span> </li> </ul> <div><input type="checkbox" id="myck" /><span class="do">全选</span></div></div></body></html>
以上代码实现了我们所需要的功能。
特别说明:
获取checkbox属性值之所以要使用prop()而不使用attr(),是因为如果checkbox没有被选中的话,返回值是undefined,那么就不能够取消选中的复选框。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5815
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题:如何使用jQuery实现复选框的全选和取消
关键词:jquery