js02_1.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <input type="checkbox" name="hobby"> 电影
  9. <input type="checkbox" name="hobby"> 旅游
  10. <input type="checkbox" name="hobby"> 游戏
  11. <button onclick="selectAll()" >全选</button>
  12. <button onclick="selectNotAll()" >全不选</button>
  13. <button onclick="select()" >反选</button>
  14. <!--
  15. 需求 实现全选 全不选 反选
  16. 1.获取复选框
  17. 2.修改每一个属性 checked = true
  18. -->
  19. <script>
  20. function selectAll(){
  21. let insArr= document.getElementsByName("hobby");
  22. //遍历
  23. for (let i = 0; i < insArr.length; i++) {
  24. //修改每一个
  25. insArr[i].checked = true;
  26. }
  27. }
  28. function selectNotAll(){
  29. let insArr= document.getElementsByName("hobby");
  30. //遍历
  31. for (let i = 0; i < insArr.length; i++) {
  32. //修改每一个
  33. insArr[i].checked = false;
  34. }
  35. }
  36. function select(){
  37. let insArr= document.getElementsByName("hobby");
  38. //遍历
  39. for (let i = 0; i < insArr.length; i++) {
  40. //修改每一个
  41. insArr[i].checked = !insArr[i].checked ;
  42. }
  43. }
  44. </script>
  45. </body>
  46. </html>