example10.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form action="" method="post">
  9. <label>你的爱好:&nbsp;</label>
  10. <input type="checkbox" name="fav">旅游
  11. <input type="checkbox" name="fav">游戏
  12. <input type="checkbox" name="fav">美食
  13. <input type="checkbox" name="fav">阅读
  14. <input type="checkbox" name="fav">睡觉
  15. <input type="checkbox" name="fav">其他
  16. <a href="javascript:void(0);">全选</a>
  17. <a href="javascript:void(0);">取消</a>
  18. <a href="javascript:void(0);">反选</a>
  19. </form>
  20. <script>
  21. (function() {
  22. var allAnchors = document.querySelectorAll('form a');
  23. var favList = document.querySelectorAll('input[name=fav]');
  24. allAnchors[0].addEventListener('click', function() {
  25. for (var i = 0; i < favList.length; i += 1) {
  26. // favList[i].setAttribute('checked', '');
  27. favList[i].checked = true;
  28. }
  29. });
  30. allAnchors[1].addEventListener('click', function() {
  31. for (var i = 0; i < favList.length; i += 1) {
  32. // favList[i].removeAttribute('checked');
  33. favList[i].checked = false;
  34. }
  35. });
  36. allAnchors[2].addEventListener('click', function() {
  37. for (var i = 0; i < favList.length; i += 1) {
  38. favList[i].checked = !favList[i].checked;
  39. }
  40. });
  41. })();
  42. </script>
  43. </body>
  44. </html>