你的位置:首页 > Java教程

[Java教程]如何使用jQuery实现复选框的全选和取消


如何使用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="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/