使用jquery实现表单的全选与全不选功能只能监听一次
0
[已解决问题]
解决于 2016-05-30 09:27
如图，功能可以实现，但是点击一次实现了全选后，取消全选，就不可以再次全选了。请问是出了什么问题
<!DOCTYPE html> <html> <head> <title>斑马状表格实现</title> <meta charset="utf-8"> <script type="text/javascript" src="./js/lib/jquery.js"></script> </head> <body> <div id="wrap"> <table> <tr> <th>选择</th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>工资</th> </tr> <tr> <td><input type="checkbox" id="checkbox1" value="0"/></td> <td>1104201</td> <td>张小明</td> <td>男</td> <td>14000</td> </tr> <tr> <td><input type="checkbox" id="checkbox2" value="0"/></td> <td>1104202</td> <td>吴呜呜</td> <td>女</td> <td>11000</td> </tr> <tr> <td><input type="checkbox" id="checkbox3" value="0"/></td> <td>1104203</td> <td>李春花</td> <td>男</td> <td>12000</td> </tr> <tr> <td><input type="checkbox" id="checkbox4" value="0"/></td> <td>1104204</td> <td>希特勒</td> <td>男</td> <td>18000</td> </tr> <tr> <td><input type="checkbox" id="checkbox5" value="0"/></td> <td>1104205</td> <td>李飞刀</td> <td>女</td> <td>10000</td> </tr> <tr> <td style="text-align:left;height:28px"><span><input type="checkbox" id="checkall">全选</span></td> </tr> </table> </div> <script type="text/javascript"> $(function() { $('table tr:nth-child(odd)').css('background-color','#eee'); $('#checkall').click(function() { if(this.checked) { $('table tr td input[type = checkbox]').attr('checked',true); } else { $('table tr td input[type = checkbox]').attr('checked',false); } }) }) </script> <style type="text/css"> td{border-right :solid 1px red; border-bottom:solid 1px red;} </style> </body> </html>
最佳答案
1
没问题啊 复制下来 运行。
<!DOCTYPE html> <html> <head> <title>斑马状表格实现</title> <meta charset="utf-8"> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> </head> <body> <div id="wrap"> <table> <tr> <th>选择</th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>工资</th> </tr> <tr> <td><input type="checkbox" id="checkbox1" value="0"/></td> <td>1104201</td> <td>张小明</td> <td>男</td> <td>14000</td> </tr> <tr> <td><input type="checkbox" id="checkbox2" value="0"/></td> <td>1104202</td> <td>吴呜呜</td> <td>女</td> <td>11000</td> </tr> <tr> <td><input type="checkbox" id="checkbox3" value="0"/></td> <td>1104203</td> <td>李春花</td> <td>男</td> <td>12000</td> </tr> <tr> <td><input type="checkbox" id="checkbox4" value="0"/></td> <td>1104204</td> <td>希特勒</td> <td>男</td> <td>18000</td> </tr> <tr> <td><input type="checkbox" id="checkbox5" value="0"/></td> <td>1104205</td> <td>李飞刀</td> <td>女</td> <td>10000</td> </tr> <tr> <td style="text-align:left;height:28px"><span><input type="checkbox" id="checkall">全选</span></td> </tr> </table> </div> <script type="text/javascript"> $(function() { $('table tr:nth-child(odd)').css('background-color','#eee'); $('#checkall').click(function() { if(this.checked) { $('table tr td input[type = checkbox]').attr('checked',true); } else { $('table tr td input[type = checkbox]').attr('checked',false); } }) }) </script> <style type="text/css"> td{border-right :solid 1px red; border-bottom:solid 1px red;} </style> </body> </html>
奖励园豆：5
没找到你改的地方，但是复制上去后真的可以用了，不知道我的哪里错了。谢谢了
应该是我的jquery文件有问题，去换一个就好了
