JavaScript实现全选，伸展收缩

最新推荐文章于 2022-06-20 11:01:53 发布

小欣儿

最新推荐文章于 2022-06-20 11:01:53 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/u012230055/article/details/40402391

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页中全选功能及表格显示隐藏的方法。具体包括通过单个复选框控制多个复选框的选中状态，以及通过按钮控制表格的显示与隐藏。这些功能在网页开发中十分实用。

<script type="text/javascript">
   function check() {
       var m = document.getElementsByName("all")[0];//通过名字获取对象getElementsByName，注意s
       var n = document.getElementsByName("check");
       if (m.checked == true) {
           for (var i = 0; i < n.length; i++) {
               n[i].checked = true;
           }
       } else {
           for (var i = 0; i < n.length; i++) {
               n[i].checked = false;
           }
       }
   }
   function show() {
       var m = document.getElementById("show");//收缩按钮
       var n = document.getElementById("table");//表格
       if (m.value == "收缩") {
           n.style.display = "none";
           m.value = "展开";
       } else {
           n.style.display = "block";
           m.value = "收缩";
       }

   }
</script>
<body>
   <table align="center" border="1" width="200">
       <tr>
           <td width="80">
               <input type="checkbox" name="all" onclick="check();">全选
           </td>
           <td><input type="button" value="收缩 " onclick="show();" id="show"></td>
       </tr>
   </table>
   <table align="center" border="1" id="table" width="200">
        
       <%
           for (int i = 0; i < 10; i++) {
       %>
       <tr>
           <td width="80"><input type="checkbox" name="check"></td>
           <td><%=i%></td>
       </tr>
       <%
           }
       %>

</table>

效果图：

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。