JavaScript实现全选,伸展收缩

来源:互联网 发布:php 请求参数加密 编辑:程序博客网 时间:2024/05/16 04:34
<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">
        <!-- 通过循环生成10个多选框 -->
        <%
            for (int i = 0; i < 10; i++) {
        %>
        <tr>
            <td width="80"><input type="checkbox" name="check"></td>
            <td><%=i%></td>
        </tr>
        <%
            }
        %>

    </table>

效果图:


0 0