博客列表 >JavaScript-checkbox全选案例

JavaScript-checkbox全选案例

刘静的博客
刘静的博客原创
2020年08月18日 13:04:31507浏览

JavaScript——t全选案例如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>02.JavaScript——t全选</title>
  6. <style type="text/css" media="screen">
  7. .box{width:120px;height:250px;border:1px solid #000;border-radius:5px;padding:5px 10px;margin:20px auto;}
  8. .box div{border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:8px;}
  9. .box input{margin:8px;}
  10. </style>
  11. <script type="text/javascript">
  12. function checkAll(){
  13. var checkall,item;
  14. checkall=document.getElementById('checkall');
  15. item=document.getElementsByName('item[]');
  16. for(var i=0;i<item.length;i++){
  17. if(checkall.checked){
  18. item[i].checked=true;
  19. }else{
  20. item[i].checked=false;
  21. }
  22. }
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div class="box">
  28. <div>
  29. <input type="checkbox" id="checkall" onclick="checkAll(this)">
  30. <label for="checkall">全选</label>
  31. </div>
  32. <input type="checkbox" name="item[]">选项1<br>
  33. <input type="checkbox" name="item[]">选项2<br>
  34. <input type="checkbox" name="item[]">选项3<br>
  35. <input type="checkbox" name="item[]">选项4<br>
  36. <input type="checkbox" name="item[]">选项5<br>
  37. <input type="checkbox" name="item[]">选项6<br>
  38. </div>
  39. </body>
  40. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议