全选案例的练习

Original 2019-02-21 11:27:35 201
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全选</title> <link rel="stylesheet" type="text/css" href=""> &

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全选</title>

<link rel="stylesheet" type="text/css" href="">

<link rel="shortcut icon" type="image/x-icon" href="">


<style type="text/css">


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


.box div {border-bottom: 1px solid #ccc;padding-bottom: 10px;margin-bottom: 8px;}


.box input{margin: 8px;}

</style>

<body>


<div class="box">

<div>

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

</div>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项1<br>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项2<br>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项3<br>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项4<br>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项5<br>

<input type="checkbox" name = "item" onclick="checkitem(this)" >选项6<br>


</div>



<script type="text/javascript">

checkall.onclick=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;

}


}

}


function checkitem(x){

var checkall;

checkall = document.getElementById("checkall");

if(!x.checked){

if(checkall.checked){

checkall.checked = false;

}

}

}



</script>



</body>

</html>


总结:在对标签进行操作时,在获取一些列相同样式的标签时,可以用一个对象进行获取,获取一个数组对象。同样也可以在调用方法时将对象传入,同样可以获取对象。



Correcting teacher:韦小宝Correction time:2019-02-21 11:43:26
Teacher's summary:全选这个案例不管是在网站的前台还是网站的后台基本上都会使用的 可想而知是多重要的 一定要好好掌握!

Release Notes

Popular Entries