码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript - 复选框的全选和取消

时间:2015-04-26 09:15:56      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:javascript   复选框   全选和取消   

复选框的全选和取消

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框的全选和取消</title>
<style type="text/css">
    table{
        width:400px;
        text-align:center;
    }
</style>
<script type="text/javascript">
    window.onload=function(){
        $("all").onclick=function(){
            var stus=document.getElementsByName("stu");
            if($("all").checked==true){
                for(var i=0;i<stus.length;i++){
                    stus[i].checked=true;
                }
            }else{
                for(var i=0;i<stus.length;i++){
                    stus[i].checked=false;
                }
            }
        };
    };
            function $(id){
            return document.getElementById(id);
        }
</script>
</head>
<body>
    <form action="" method="post">
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
                <th><input type="checkbox" id="all" value="全选"/>全选</th>
                <th>姓名</th>
                <th>java</th>
                <th>html</th>
                <th>javascript</th>
        </tr>
        <tr>
                <td><input type="checkbox" name="stu" /></td>
                <td>赵信</td>
                <td>85</td>
                <td>79</td>
                <td>67</td>
        </tr>
        <tr>
                <td><input type="checkbox" name="stu" /></td>
                <td>盖伦</td>
                <td>85</td>
                <td>97</td>
                <td>67</td>
        </tr>
        <tr>
                <td><input type="checkbox" name="stu" /></td>
                <td>石头人</td>
                <td>85</td>
                <td>79</td>
                <td>67</td>
        </tr>
    </table>
    </form>
</body>
</html>

JavaScript - 复选框的全选和取消

标签:javascript   复选框   全选和取消   

原文地址:http://blog.csdn.net/wangzi11322/article/details/45285627

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!