|
|
JavaScript基础教程与应用辅导资料十八主 题：课件第七章 复选框事件
学习时间：2020年7月27日－8月2日
“不忘初心、牢记使命”主题理论学习：
每周文摘：实现我们确立的奋斗目标，我们既要有“乱云飞渡仍从容”的战略定力，又要有“不到长城非好汉”的进取精神。全党全国各族人民更加紧密地团结起来，勿忘昨天的苦难辉煌，无愧今天的使命担当，不负明天的伟大梦想，下定决心，排除万难，在中国特色社会主义伟大道路上，为实现中华民族伟大复兴的中国梦，前进！
摘选自《在纪念毛泽东同志诞辰一百二十周年座谈会上的讲话》
内 容：
我们这周主要学习课件第七章复选框事件处理的相关内容，希望通过下面的内容能使同学们加深对本章相关知识点的理解。
知识脉络：
1.复选框事件处理
2.复选框全选，不选，反选
重点与难点：
1.重点：复选框全选，反选，不选
2.难点：复选框全选，反选，不选一、复选框事件处理
复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。
范例：操作复选框,要求是可以一个个去选择选项，也可以直接全选，全选按钮的状态根据选中的选项个数自动变化，即全选按钮的状态会自动取消或者自动勾选。
<!doctype html>
<html lang = "zh-CN">
<head> <meta charset="utf-8">
<meta name="description" content="this is a checkbox example">
<meta name="keywords" content="checkbox,html,js">
<title>复选框的测试</title> <script type="text/javascript">
window.onload = function () { //获取复选框元素
var checkbox = document.all('checkbox');
var checkall = document.getElementById('checkAll'); /*点击全选按钮全部选中的情况*/
checkall.addEventListener('click',function(){
if (checkbox.length == undefined) {//一个选项时
checkbox.checked = checkall.checked;
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
checkbox[i].checked = this.checked;
}
}
},false);
//全部按钮什么时候被自动选中以及自动取消
if (checkbox.length == undefined) {//一个选项时
checkbox.addEventListener('click',function(){
checkall.checked = checkbox.checked;
},false);
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
checkbox[i].addEventListener('click',function(){
for (var i = 0; i < checkbox.length; i++){
if (!checkbox[i].checked) {
checkall.checked = false; //全选自动取消
break;
}else{
if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选
}
}
},false);
}
}
//打印您所有的选择
document.getElementById('selecteBtn').addEventListener('click',function() { /*一个个去选择时的情况*/
var yourchoose = "您选择的爱好有：";
if (checkbox.length == undefined) {//一个选项时
if (checkbox.checked) yourchoose = yourchoose + checkbox.value;
}else{
for (var i = 0; i < checkbox.length; i++) {//多个选项时
if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";
};
}
alert(yourchoose);
},false);
}
</script> </head>
<body>
<form action="">
您的爱好有:
<input type="checkbox" name="checkbox" id="checkbox" value="电影">电影
<input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐
<input type="checkbox" name="checkbox" id="checkbox" value="看书">看书
<input type="checkbox" name="checkbox" id="checkbox" value="打球">打球
<input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山
<input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳
<input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部
<input type="button" name="selecteBtn" id="selecteBtn" value="选择">
</form>
</body>
</html>二、复选框全选，反选，不选
<script>
window.onload=function(){
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=true;
};
};
UnCheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
} };
};
};
</script>
</head>
<body>
全选：<input type="button" id="All" value="全选" /><br />
不选<input type="button" id="uncheck" value="不选" /><br />
反选<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
<input type="checkbox" />ZEALER<br />
<input type="checkbox" />BLOG<br />
<input type="checkbox" />MOOC<br />
</div>
</body> 转载注明 无忧答案网
|
|
