<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选/不选练习</title>
</head>
<body>
<form action="" method="post">
你爱好的运动是<input name="Checkbox" type="checkbox" id = "checkedAllbox"checked>全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="兵乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全选" / >
<input type="button" id="checkedNoBtn" value="全不选" / >
<input type="button" id="checkedRevBtn" value="反选" / >
<input type="button" id="sendBtn" value="提交" / >
</div>
</form>
<div id="index">
<div id="c">
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
<div id="btnlist">
<div><button type="button" id="btn01">创建一个广州节点</button></div>
<div><button type="button" id="btn02">将广州节点插入到bj前面</button></div>
<div><button type="button" id="btn03">使用广州节点替换bj节点</button></div>
<div><button type="button" id="btn04">删除广州节点</button></div>
<div><button type="button" id="btn05">读取city内的节点数量</button></div>
<div><button type="button" id="btn06">读取bj内的html代码</button></div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
// 为id为checkedAllBtn绑定一个点击事件
//全选
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
items[i].checked=true;
}
}
//全不选
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
items[i].checked=false;
}
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
if(items[i].checked==false){
items[i].checked=true
}else{
items[i].checked=false
}
}
}
//提交
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName('items');
//遍历items
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
if(items[i].checked==true){
alert(items[i].value);
}
}
}
//全选/全不选
var checkedAllbox = document.getElementById("checkedAllbox");
checkedAllbox.onclick = function(){
var items = document.getElementsByName('items');
//设置多选框选中状态
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
items[i].checked = checkedAllbox.checked;
}
}
//设置当四个全选中,checkbox应该选中该,否则
var items = document.getElementsByName('items');
for(var i = 0;i<items.length;i++){
//通过多选框的checked的属性来全选
items[i].onclick = function(){
checkedAllbox.checked=true;//默认点击一个就显示全选
for(var j =0;j<items.length;j++){
if(!items[j].checked){
checkedAllbox.checked=false;
}
}
}
}
//dom剩余查询方法
//获取body
var body = document.getElementsByTagName('body')[0];
var body = document.body;
var html = document.documentElement;
//查询页面所有元素
var all = document.all;
var all = document.getElementsByTagName('div');
//根据元素的class属性查询一组元素节点信息
var box1 =document.getElementsByClassName('box1');
//获取class为box1的所有div
var div = document.querySelector('.box1 div');
//dom增删改
//创建一个city节点,添加到广州节点下
myClick("btn01",function(){
var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
//创建广州文本节点
var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
//将gztext设置成li的子节点
li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
//获取id为city的节点
var city = document.getElementById('city');
//将广州添加到city下面
city.appendChild(li);
});
//将广州节点插入到bj前面
myClick("btn02",function(){
var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
//创建广州文本节点
var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
//将gztext设置成li的子节点
li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
//获取北京节点
var bj = document.getElementById('bj');
//获取city
var city = document.getElementById('city');
//插入到北京前面,insertbefore参数1新节点,参数二旧节点
city.insertBefore(li,bj);
});
//使用广州节点替换北京节点
myClick("btn03",function(){
var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
//创建广州文本节点
var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
//将gztext设置成li的子节点
li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
//获取北京节点
var bj = document.getElementById('bj');
//获取city
var city = document.getElementById('city');
//替换节点
city.replaceChild(li,bj);
});
//删除北京节点
myClick("btn04",function(){
var bj = document.getElementById("bj");//createelement()可以用来创建一个元素节点对象
var city = document.getElementById('city');//获取city
//删除子节点
// city.removeChild(bj);
//子节点.parentNode.removeCHild(子节点)
bj.parentNode.removeChild(bj);
});
//读取city的代码
myClick("btn05",function(){
var city = document.getElementById('city');//获取city
alert(city.innerHTML);
});
//设置BJ内的代码
myClick("btn06",function(){
//获取bj
var bj = document.getElementById('bj');
bj.innerHTML = "昌平";
});
//向city中添加广州
var city = document.getElementById('city');
city.innerHTML +="<li>广州</li>"
//公共的点击响应
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick=fun;
}
}
</script>
</body>
</html>
js基础dom全选,操作元素练习
最新推荐文章于 2022-09-13 10:04:59 发布