JavaScrip-—t全选-作业

原创2019-01-14 15:44:12180
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScrip-—t全选-作业</title> <style type="text/css"> table{width:150px;height:120p

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScrip-—t全选-作业</title>

<style type="text/css">

table{width:150px;height:120px;margin:20px auto;text-align:center;border-collapse:collapse;}

th,td{border:1px solid #ccc;width:75px;line-height:20px;}

</style>


<script type="text/javascript">


function checkAll(){

var all = document.getElementById('checkall');

var item = document.getElementsByName('item[]');//name的名称必须一致

var item_count = item.length;//获取个数

var all_res = all.checked;//获取全选的状态

var i = 0;//定义初始值

//i<个数的时候进入循环

while(i <= item_count){

//判断全选的状态,true的话全部多选框的checked的值也为true,反之为false;

if(all_res){

item[i].checked = true;

}else{

item[i].checked = false;

}

i++;

}

}


</script>

</head>

<body>

<table>

<tr><th><input type = 'checkbox' id = 'checkall' onclick = 'checkAll()'>全选</th><th>编号</th></tr>

<tr><td><input type = 'checkbox' name='item[]' ></td><td>1</td></tr>

<tr><td><input type = 'checkbox' name='item[]' ></td><td>2</td></tr>

<tr><td><input type = 'checkbox' name='item[]' ></td><td>3</td></tr>

<tr><td><input type = 'checkbox' name='item[]' ></td><td>4</td></tr>

<tr><td><input type = 'checkbox' name='item[]' ></td><td>5</td></tr>

</table>

</body>

</html>


批改老师:查无此人批改时间:2019-01-14 16:18:03
老师总结:完成的不错。养成好习惯,把代码缩进,加点注释。加油。

发布手记

热门词条