全选实现javascript功能要点

原创 2018-10-30 21:24:00 165
摘要:<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>全选</title>     &
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全选</title>
    <style type="text/css">
          .box{width: 120px;height: 250px;border: 1px solid #000;border-radius: 5px;padding:5px 10px;margin:20px auto;}
          .box div{border-bottom:  1px solid #000;padding-bottom: 10px;margin-bottom: 8px;}
          .box input{margin: 8px;}
    </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){
                    item[i].checked=true;//当全选框被选中时下面的勾选框被选中
                }else{
                    item[i].checked=false;//反之清空
                }
            }
        }
    </script>

首先声明两个变量checkAll和item两个变量,然后两个变量分别获取html中的全选和下面的勾选框,最后通过for循环和if、else实现全选功能

发布手记

热门词条