简单的全选功能

原创 2018-11-13 15:29:51 200
摘要:<!DOCTYPE html> <html>          <head>         <title>       
<!DOCTYPE html>
<html>
    
    <head>
        <title>
            全选
        </title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0px;padding:0px}#box{width:100px;height:auto;margin:10px auto;border:1px
            solid#f2f2f2}#box input{margin:10px}hr{width:90px;border:0.5px solid#ccc;margin:0px
            auto}
        </style>
        <script type="text/javascript">
            function checkall() {
                var checkall, checkbox;
                checkall = document.getElementsByName('checkall');
                checkbox = document.getElementsByName('che[]');
                for (var i = 0; i < checkbox.length; i++) {
                    if (checkall[0].checked == true) {
                        checkbox[i].checked = true
                    } else {
                        checkbox[i].checked = false
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <div id="box">
            <div>
                <input type="checkbox" name="checkall" onclick="checkall()">
                全选
                <hr>
            </div>
            <input type="checkbox" name="che[]">
            橘子
            <br>
            <input type="checkbox" name="che[]">
            苹果
            <br>
            <input type="checkbox" name="che[]">
            香蕉
            <br>
            <input type="checkbox" name="che[]">
            石榴
            <br>
        </div>
    </body>

</html>

总结:

1、要熟悉HTML各种标签及其属性;

2、熟悉css的各种熟悉;

3、熟悉JavaScript原生的类及其方法;

批改老师:灭绝师太批改时间:2018-11-13 15:34:03
老师总结:熟悉的怎么样?理清了是不是很简单……继续加油有问题就反馈

发布手记

热门词条