jQuery实现复选框全选/取消全选/反选及获得选择的值
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现复选框全选/取消全选/反选及获得选择的值,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2153字,纯文字阅读大概需要4分钟。
内容图文
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="../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; }); } }); // 全选 $("#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="1" /></td> <td>1</td> <td>wangzs1</td> <td>18888000</td> <td>浦东</td> </tr> <tr> <td><input type="checkbox" class="userid" value="2" /></td> <td>2</td> <td>wangzs2</td> <td>18888001</td> <td>上海</td> </tr> <tr> <td><input type="checkbox" class="userid" value="3" /></td> <td>3</td> <td>wangzs3</td> <td>18888002</td> <td>河南</td> </tr> <tr> <td><input type="checkbox" class="userid" value="4" /></td> <td>4</td> <td>wangzs4</td> <td>18888003</td> <td>许昌</td> </tr> <tr> <td></td> <td><input type="button" id="checkAll" value="全选" /></td> <td><input type="button" id="removeAll" value="取消全部" /></td> <td><input type="button" id="reverse" value="反选" /></td> </tr> <tr> <td colspan="4" align="center"><input type="button" value="批量删除" id="delAll"></td> </tr> </table> </body> </html>
更多jQuery实现复选框全选/取消全选/反选及获得选择的值相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的jQuery实现复选框全选/取消全选/反选及获得选择的值全部内容,希望文章能够帮你解决jQuery实现复选框全选/取消全选/反选及获得选择的值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。