标签框的全选和全取消

原创2019-02-09 14:35:55138
摘要:<!DOCTYPE html><html><head> <title>switch</title> <style type="text/css"> .box0{width: 100px;height: 200px;;margin:100px auto;border: 1px solid #000} .box

<!DOCTYPE html>

<html>

<head>

<title>switch</title>

<style type="text/css">

.box0{width: 100px;height: 200px;;margin:100px auto;border: 1px solid #000}

.box0 div{margin-bottom: 20px;border-bottom: 1px solid #000}

.box0 input{margin-top: 8px;}

</style>

</head>

<body>

<script type="text/javascript">

function function_checkAll() {

var checkall,item;

checkall=document.getElementById("in")

item=document.getElementsByName("in1")

console.log(item)

for(var i=0;i<item.length;i++){

console.log(item[i])

if (checkall.checked) {item[i].checked=true;}

else{item[i].checked=false;}

}

}

</script>

<div class="box0">

<div>

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

</div>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项1</label><br>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项2</label><br>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项3</label><br>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项4</label><br>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项5</label><br>

<input type="checkbox" name="in2" id="in1"><label for "in1">选项6</label><br>

</div>


</body>

</html>


批改老师:韦小宝批改时间:2019-02-11 10:05:58
老师总结:写的很不错 全选在很多的项目中都可以见到 并且还是比较重要的知识

发布手记

热门词条