全选框功能实现

原创 2019-06-04 11:48:05 189
摘要:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{width: 100px;height: 280px;border: 1px solid #000;padding: 10px 6px;border-radiu

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.box{width: 100px;height: 280px;border: 1px solid #000;padding: 10px 6px;border-radius: 8px;}

#checked{margin: 8px auto;border-bottom: 1px solid;padding: 8px;}

.box input{margin: 8px;}

</style>

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

</head>

<body>

<div class="box">

<div id="checked">

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

</div>

<input type="checkbox" name="item[]">选项一<br>

<input type="checkbox" name="item[]">选项二<br>

<input type="checkbox" name="item[]">选项三<br>

<input type="checkbox" name="item[]">选项四<br>

<input type="checkbox" name="item[]">选项五<br>

<input type="checkbox" name="item[]">选项六<br>

<input type="checkbox" name="item[]">选项七<br>

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-06-04 13:23:57
老师总结:全选的本质就是给每一个复选框添加一个checked

发布手记

热门词条