JavaScript全选

原创 2018-11-05 23:41:17 294
摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .dex{ width: 120px; height: 250px; border: 1px solid #0

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>


.dex{

width: 120px;

height: 250px;

border: 1px solid #000;

border-radius: 4px;

margin: 20px auto;

padding: 5px 10px;

}

.dex div{


border-bottom: 1px solid #000;

}

.dex input{

margin: 8px;

}

</style>

</head>

<body>


<div class="dex">

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

<script>

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>


<!--谢谢老师指导,老师辛苦了 感谢php中文网-->

</html>


批改老师:灭绝师太批改时间:2018-11-06 09:08:41
老师总结:初学者来说,希望可以把js中每一句代码的的用意注释在旁边,便于记忆有利于学习

发布手记

热门词条