Blogger Information
Blog 22
fans 0
comment 1
visits 17923
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript-checkbox全选案例
刘静的博客
Original
508 people have browsed it

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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post