完成全选样式作业

原创 2019-01-12 23:46:04 288
摘要:<!DOCTYPE html><html><head>    <meta charset="utf-8"> <title>全选</title> <style type="text/css">         

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>全选</title>

<style type="text/css">

         .box{color: blue;background-color: #fff;}

         .box{width: 120px;height:  220px;border: 1px solid #ccc;border-radius: 5px;padding: 5px 10px;margin: 20px auto;}

         .box div{border-bottom: 1px solid red;padding-bottom: 10px;}

         .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>

</head>

<body>

<div class="box">

    <div>

      <input type="checkbox"  id="checkall" onclick="checkAll()"><label for="checkall">全选</label>

    </div>

    <input type="checkbox" name="item[]">选项1<br>

    <input type="checkbox" name="item[]">选项2<br>

    <input type="checkbox" name="item[]">选项3<br>

    <input type="checkbox" name="item[]">选项4<br>

    <input type="checkbox" name="item[]">选项5<br>

    <input type="checkbox" name="item[]">选项6<br>


</div>

</body>

</html>

电脑的配置或版本会不会影响代码的实现

批改老师:天蓬老师批改时间:2019-01-13 09:30:29
老师总结:name="item[]", 这里这样写,主要是考虑到提给脚本方便处理,因为js/php的数组,都是这样声明的,这里把name写成数组格式可以直接使用的

发布手记

热门词条