JavaScript全选作业

原创 2019-01-02 21:57:29 316
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>一周</title> <style type="text/css"> .box{ width: 120px; height: 250px; b

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>一周</title>

<style type="text/css">


.box{

width: 120px;

height: 250px;

border: 1px double blue;

border-radius: 10px;

padding: 5px 10px;

margin: 20px auto;

}

.box div{

border-bottom: 1px dashed #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>

</head>

<body>

<div class="box">

<div>

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

</div>

<input type="checkbox" name="item[]">星期一<br>

<input type="checkbox" name="item[]">星期二<br>

<input type="checkbox" name="item[]">星期三<br>

<input type="checkbox" name="item[]">星期四<br>

<input type="checkbox" name="item[]">星期五<br>

<input type="checkbox" name="item[]">星期六<br>

<input type="checkbox" name="item[]">星期日<br>

</div>

</body>

</html>


批改老师:灭绝师太批改时间:2019-01-03 09:15:56
老师总结:完成的很好,全选在页面布局中还是非常常用的,要好好掌握!

发布手记

热门词条