利用js制作全选框案例

原创 2019-01-31 15:12:13 218
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<style>

.box{

border: 1px solid black;border-radius: 3px;margin:0 auto;width: 100px;height: 200px;

}

.box div{

border-bottom: 1px solid black;

}

.box input{

margin:8px;

}

</style>

</head>

<body>

<div class="box">

<div>

<input type="checkbox" id="checkall" onclick="checkall()"><label  foe="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>

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

</body>

</html>


发布手记

热门词条