首页 > 代码库 > jQuery 复选框全选/取消全选/反选
jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值。
完整代码:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $("#checkAllChange").click(function() { if (this.checked == true) { $(".userid").each(function() { this.checked = true; }); } else { $(".userid").each(function() { this.checked = false; }); } // www.jbxue.com }); // 全选 $("#checkAll").click(function() { $(".userid").each(function() { this.checked = true; }); }); // 取消全部 $("#removeAll").click(function() { $(".userid").each(function() { this.checked = false; }); }); // 反选 $("#reverse").click(function() { $(".userid").each(function() { if (this.checked == true) { this.checked = false; } else { this.checked = true; } }) }); //批量删除 $("#delAll").click(function() { var arrUserid = new Array(); $(".userid").each(function(i) { if (this.checked == true) { arrUserid[i] = $(this).val(); } }); alert("批量删除的:" + arrUserid); }); }); </script> </head> <body> <table border="1"> <tr> <td><input type="checkbox" id="checkAllChange" /></td> <td>用户id</td> <td>用户名</td> <td>电话</td> <td>地址</td> </tr> <tr> <td><input type="checkbox" class="userid" value="http://www.mamicode.com/1" /></td> <td>1</td> <td>wangzs1</td> <td>18888000</td> <td>浦东</td> </tr> <tr> <td><input type="checkbox" class="userid" value="http://www.mamicode.com/2" /></td> <td>2</td> <td>wangzs2</td> <td>18888001</td> <td>上海</td> </tr> <tr> <td><input type="checkbox" class="userid" value="http://www.mamicode.com/3" /></td> <td>3</td> <td>wangzs3</td> <td>18888002</td> <td>河南</td> </tr> <tr> <td><input type="checkbox" class="userid" value="http://www.mamicode.com/4" /></td> <td>4</td> <td>wangzs4</td> <td>18888003</td> <td>许昌</td> </tr> <tr> <td></td> <td><input type="button" id="checkAll" value="http://www.mamicode.com/全选" /></td> <td><input type="button" id="removeAll" value="http://www.mamicode.com/取消全部" /></td> <td><input type="button" id="reverse" value="http://www.mamicode.com/反选" /></td> </tr> <tr> <td colspan="4" align="center"><input type="button" value="http://www.mamicode.com/批量删除" id="delAll"></td> </tr> </table> </body> </html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。