全选的js实现

原创 2018-12-16 00:42:48 187
摘要:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{width: 120px;height: 250px;border: 1px solid #ccc;border-radius: 5px;padding: 0p

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

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

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

.box input{margin: 8px; }

</style>

<script type="text/javascript">

function checkall(){

var checkall,item;

checkall=document.getElementById('checkall');

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

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

<script type="text/javascript">


</script>

</body>

</html>


批改老师:天蓬老师批改时间:2018-12-16 09:01:20
老师总结:利用复选框进行全选操作,name属性值是关键,请用数组形式

发布手记

热门词条