你的位置:首页 > Java教程

[Java教程]jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选:

在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理、用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果。代码实例如下:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $.fn.checkCbx=function(){  return this.each(function(){   this.checked = !this.checked;  })} $(function(){  $("#btnSelect").click(function(){   this.value = this.value == "全选"?"反选":"全选";   $("input:checkbox").checkCbx();  }) }) </script></head><body><form name="form1" method="post" action="Default8.aspx" id="form1"> <table border="1">  <tr>   <th>选择</th>   <th>id</th>   <th>姓名</th>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>1</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>2</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>3</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>4</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>5</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>6</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>7</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>8</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>9</td>   <td>蚂蚁部落</td>  </tr>  <tr>   <td><input type="checkbox" name="cbx" /></td>   <td>10</td>   <td>蚂蚁部落</td>  </tr> </table> <input id="btnSelect" type="button" value="全选" /></form></body></html>

以上代码实现复选框的全选和全不选效果。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0519/1933.html

最为原始地址是:http://www.softwhy.com