经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery实现Checkbox复选框全选、全不选、反选等功能
来源:cnblogs  作者:Schieber  时间:2021/2/1 11:56:08  对本文有异议

前段时间使用JavaScript写了一个简易版的Checkbox全选全不选功能
于是最近使用jQuery完善了Checkbox的反选、提交等功能,以下为完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>使用prop和checked实现复选框全选全不选反选等功能</title>
  6. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. // 全选按钮功能
  10. $("#checkedAllBtn").click(function () {
  11. $(":checkbox").prop("checked", true);
  12. });
  13. // 全不选按钮功能
  14. $("#checkedNoBtn").click(function () {
  15. $(":checkbox").prop("checked", false);
  16. });
  17. // 反选按钮功能
  18. $("#checkedRevBtn").click(function () {
  19. $(":checkbox[name='items']").each(function () {
  20. // 每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(这里指不同的items复选框)
  21. this.checked = !this.checked;
  22. });
  23. // 获取所有球类运动选项框的数量
  24. var allCount = $(":checkbox[name='items']").length;
  25. // 获取当前球类运动选项框选中的数量
  26. var checkedCount = $(":checkbox[name='items']:checked").length;
  27. // 如果复选框选中数量和总数量相同,则将全选/全不选按钮状态随之更改为true/false
  28. $("#checkedAllNone").prop("checked", allCount === checkedCount);
  29. });
  30. // 提交按钮功能
  31. $("#submitBtn").click(function () {
  32. // :冒号选择器要紧跟着前面的选择器,不能有空格,不然会失去效果
  33. $(":checkbox[name='items']:checked").each(function () {
  34. // 在事件的function函数中,有一个this对象,这个this对象是当前正在相应的DOM对象(这里指选中的运动)
  35. alert(this.value);
  36. });
  37. });
  38. // 全选/全不选按钮功能
  39. $("#checkedAllNone").click(function () {
  40. //在事件的function函数中,有一个this对象,这个this对象是当前正在相应的DOM对象(这里指全选/全不选按钮)
  41. $(":checkbox[name='items']").prop("checked", this.checked);
  42. });
  43. // 当所有球类运动复选框都被选中时,全选按钮同时更改为被选中状态
  44. $(":checkbox[name='items']").click(function () {
  45. // 获取所有球类运动选项框的数量
  46. var allCount = $(":checkbox[name='items']").length;
  47. // 获取当前球类运动选项框选中的数量
  48. var checkedCount = $(":checkbox[name='items']:checked").length;
  49. $("#checkedAllNone").prop("checked", allCount == checkedCount);
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <div style="width:100%;text-align:center">
  56. <form>
  57. <span>请选择你喜欢的多项球类运动吧:</span>
  58. <br><br>
  59. <input type="checkbox" id="checkedAllNone">全选/全不选
  60. <br>
  61. <input type="checkbox" name="items" value="篮球">篮球
  62. <input type="checkbox" name="items" value="足球">足球
  63. <input type="checkbox" name="items" value="冰球">冰球
  64. <input type="checkbox" name="items" value="棒球">棒球
  65. <br><br>
  66. <input type="button" id="checkedAllBtn" value="全选">
  67. &nbsp;
  68. <input type="button" id="checkedNoBtn" value="全不选">
  69. &nbsp;
  70. <input type="button" id="checkedRevBtn" value="反选">
  71. &nbsp;
  72. <input type="button" id="submitBtn" value="提交">
  73. </form>
  74. </div>
  75. </body>
  76. </html>
代码运行效果:

原文链接:http://www.cnblogs.com/xiqingbo/p/front-end-04.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号