js全选框案例

Original 2018-11-03 22:37:02 223
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js全选框</title> <style> div{ border-bottom: 1px solid  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js全选框</title>
<style>
div{ border-bottom: 1px solid  #1ee829 }
.check input{ margin: 8px; }
.check{ width: 200px;height: 250px; border-radius: 5px;border: 1px solid #ccc; }

</style>

<script >
function checkAll () {
var checkall,check;
checkall=document.getElementById('checkall')//获取全选
check = document.getElementsByTagName('input')
for(var i=0;i<check.length;i++){
if (checkall.checked) {
check[i].checked=true;

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

}
}
</script>
</head>
<body>
<div>
<div><input type="checkbox" id="checkall"  onclick="checkAll()">
<label for="checkall">全选</label>

</div>
<input type="checkbox" name="check[]">单选</br>
<input type="checkbox" name="check[]">单选</br>
<input type="checkbox" name="check[]">单选</br>
<input type="checkbox" name="check[]">单选</br>
</div>

</body>
</html>

使用input创建选项框。创建一个js函数,使用document获取id监听input。用一个if判断当全选框的属性为选中状态checked的时候。其他选项框checked的属性=true。或者就算flase。js选项框就完成了

Correcting teacher:天蓬老师Correction time:2018-11-03 22:43:28
Teacher's summary:代码正确 ,如何再 配一张远行效果图, 会更好些, 不是吗?

Release Notes

Popular Entries