js全选作业提交

Original 2019-03-19 13:25:29 668
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js全选</title><style type="text/css">*{padding: 0;margin: 0;}.box{width: 100px;borde

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js全选</title>

<style type="text/css">

*{padding: 0;

margin: 0;

}

.box{

width: 100px;

border:1px solid #ccc;

border-radius: 4px;

margin:50px auto;

padding:10px;

}

.check{

height: 32px;

line-height: 32px;

border-bottom: 1px solid #ccc

}

input{

margin:10px 0;

}


</style>

</head>

<body>

<div>

<div >

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

</div>

<input type="checkbox" name="item[]">菜单1</input><br>

<input type="checkbox" name="item[]">菜单2</input><br>

<input type="checkbox" name="item[]">菜单3</input><br>

<input type="checkbox" name="item[]">菜单4</input><br>

<input type="checkbox" name="item[]">菜单5</input><br>

<input type="checkbox" name="item[]">菜单6</input> <br>

</div> 


<script type="text/javascript">

function checkall(){

var ck,item;

ck =window.document.getElementById('checkall');

item = window.document.getElementsByName('item[]');

for (var i =0;  i < item.length ; i++) {

if(ck.checked){

item[i].checked = true;

}else{

item[i].checked = false;

}

}

}

</script>

 

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-03-19 15:50:05
Teacher's summary:这是复制的教学代码吧, 想一下这个全选功能会用在哪, 自己写一下试试看

Release Notes

Popular Entries