当前位置:Gxlcms > JavaScript > jQuery Checkbox 全选 反选的简单实例

jQuery Checkbox 全选 反选的简单实例

时间:2021-07-01 10:21:17 帮助过:4人阅读

1.全选、反选

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script>
  5. <script type="text/javascript">
  6. $(function () {
  7. $("#selall").on("click", function () { $("#plalst :checkbox").prop("checked", true); });
  8. $("#selnone").on("click", function () { $("#plalst :checkbox").prop("checked", false); });
  9. $("#resver").on("click", function () { $("#plalst :checkbox").prop("checked", function (i, val) { return !val; }); });
  10. $("#chkAll").on("click", function () { $("#plalst :checkbox").prop("checked", $("#chkAll").prop("checked")) });
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <div id="plalst">
  16. <input type="checkbox" />一队
  17. <input type="checkbox" />二队
  18. <input type="checkbox" />三队
  19. <input type="checkbox" />四队
  20. <input type="checkbox" />五队
  21. <input type="checkbox" />六队
  22. </div>
  23. <br /><br /><br />
  24. <input type="button" id="selall" value="全选" />
  25. <input type="button" id="selnone" value="全不选" />
  26. <input type="button" id="resver" value="反选" />
  27. <input type="checkbox" id="chkAll" /><label for="chkAll" >选择</label>
  28. </body>
  29. </html>

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持脚本之家!

人气教程排行