js 控制全选操作

原创 2018-11-09 10:29:59 1
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>全选</title>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
    <style>
        #box ul{
            width: 150px;
            height: 300px;
            border: 1px solid #CCCCCC;
            margin: 0 auto;
        }
    ul{
        list-style: none;
    }

    </style>
    <script>
        
        function checkall() {
            var all = document.getElementById('checkall');
         var  tt = document.getElementsByName('tem[]');
            for (var i=0;i<tt.length;i++){
                if(all.checked){
                    tt[i].checked=true;
                }else{
                    tt[i].checked=false;
                }
            }

        }


    </script>
    
</head>
<body>
    <div id="box">
        <ul>
            <li><input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全选</label></li>
            <li><input type="checkbox" name="tem[]" id="a1"><label for="a1">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a2"><label for="a2">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a3"><label for="a3">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a4"><label for="a4">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a5"><label for="a5">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a6"><label for="a6">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a7"><label for="a7">选项</label></li>
            <li><input type="checkbox" name="tem[]" id="a8"><label for="a8">选项</label></li>
        </ul>

    </div>


</body>
</html>


批改老师:灭绝师太批改时间:2018-11-09 10:49:09
老师总结:完成的不错,但是除了老师上课代码测试,还需要自己找点案例练练手哦!

发布手记

热门词条