制作复选框的全选和不选效果

最新推荐文章于 2024-04-11 13:33:03 发布

lanqibaoer

最新推荐文章于 2024-04-11 13:33:03 发布

阅读量643

点赞数

分类专栏： JS前端开发文章标签： javascript

本文链接：https://blog.csdn.net/lanqibaoer/article/details/26499703

版权

JS前端开发专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<html>
<head>
 <title>制作全选效果</title>
  <script language="javascript">
    function selectAll(){
       allcheckBoxs=document.getElementsByName("a");
       var a2=document.getElementsByName("a1");
       if(a2[0].checked){
          for(var i=0;i<allcheckBoxs.length;i++){
            allcheckBoxs[i].checked = true;
          }
       }else{
         for(var i=0;i<allcheckBoxs.length;i++){
           allcheckBoxs[i].checked = false;
         }
       }
     }
  </script>
</head>
<body>
<form name="myform">
<table>
   <tr><td colspan="2"><img src="images/head.jpg"/></td></tr>
   <tr>
   <td><input type="checkbox" name="a1" οnclick="selectAll()" />全选/全不选</td>
   <td>  <img src="images/top.jpg"/></td>
   </tr>
   <tr><td><input type="checkbox" name="a" /></td><td><img src="images/one.jpg"/></td></tr>
   <tr><td><input type="checkbox" name="a" /></td><td><img src="images/two.jpg"/></td></tr>
   <tr><td><input type="checkbox" name="a" /></td><td><img src="images/three.jpg"/></td></tr>
   <tr><td><input type="checkbox" name="a" /></td><td><img src="images/four.jpg"/></td></tr>
</table>
</form>
</body>
</html>