全选或者全不选

原创 2018-11-01 14:18:15 179
摘要:<html> <head>     <meta charset="utf-8">     <title>全选</title>     <style type="te
<html>
<head>
    <meta charset="utf-8">
    <title>全选</title>
    <style type="text/css">         table {
        width: 200px;
        text-align: center;
        margin: 20px auto;
    }       </style>
    <script type="text/javascript"> function checkall() {
        var checkall, item;
        checkall = document.getElementById('checkall') //获取全选 item=document.getElementsByName('item[]')   //获取勾选框 for (var i = 0; i < item.length; i++) { if (checkall.checked) {    //checked 是选中 item[i].checked=true;    //如果全选框被选中,则勾选框选中 } else { item[i].checked=false;  //反之 } } } </script>
</head>
<body>
<div class="box">
    <table border="1px">
        <tr>
            <th><input type="checkbox" id="checkall" onclick="checkall()"/>全选</th>
            <th>选项</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="item[]"/></td>
            <td>html</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="item[]"/></td>
            <td>css</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="item[]"/></td>
            <td>JavaScript</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="item[]"/></td>
            <td>jQuery</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="item[]"/></td>
            <td>web</td>
        </tr>
    </table>
</div>
</body>
</html>

是用table做的,样式可以好看点,另外不需要设置很多div的属性

批改老师:韦小宝批改时间:2018-11-02 10:58:42
老师总结:很不错!使用table当然也可以完成!在早一段时间还有人使用table直接对对网页继续布局呢!不过个人感觉并没有div方法!但是多了解一种方法也是很不错的体验!看好你!是一个学习的好料哦!哈哈!不要骄

发布手记

热门词条