标签：checked items JavaScript 选中 按钮 var 100 选框 96
文章目录
96 DOM查询(2)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
// 为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
// 获取id为city的元素
var city = document.getElementById("city");
// 查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
alert(lis[i].innerHTML);
}
};
// 为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
// 获取id为city的节点
var city = document.getElementById("city");
// 返回#city的所有子节点
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签间空白也会当成文本节点
注意，在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes;
alert(cns.length); // 9
for(var i = 0; i < cns.length; i++){
alert(cns[i]); // 5个文本text（换行），4个li
}
/*
children属性可以获取当前元素的所有子元素，
不包括文本节点
*/
var cns2 = city.children;
alert(cns2.length);
};
// 为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
// 获取id为phone的元素
var phone = document.getElementById("phone");
// 返回#phone的第一个子节点
// firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
// lastChild可以获取到当前元素的最后一个子节点（包括空白文本节点）
var fir = phone.firstChild;
// firstElementChild获取到当前元素的第一个子元素
/*
firstElementChild不支持IE8及以下浏览器，
如果需要兼容他们尽量不要使用
*/
fir = phone.firstElementChild;
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>成都</li>
<li>深圳</li>
</ul>
<br>
<p>你喜欢哪款游戏</p>
<ul id="game">
<li id="cj">绝地求生</li>
<li>王者荣耀</li>
<li>金铲铲</li>
<li>保卫萝卜</li>
</ul>
<br>
<p>你收集的操作系统是</p>
<ul id="phone">
<li id="android">Android</li>
<li>IOS</li>
<li>鸿蒙</li>
</ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个节点</button></div>
</div>
</body>
</html>
97 DOM查询(3)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
/*
定义一个函数，专门用来指定元素绑定单击响应函数
参数:
1. idStr：要绑定单击响应函数的对象的id属性值
2. fun：事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr, fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
// 为id为btn07的按钮绑定一个单击响应函数
myClick(btn07, function(){
// 获取id为bj的节点
var bj = document.getElementById("bj");
// 返回#bj的父节点
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
innerText：该属性可以获取到元素内部的文本内容
它和innerHTML类似，不同的是他会自动将html去除
*/
//alert(pn.innerText);
});
// 为id为btn08的按钮绑定一个单击响应函数
myClick(btn08, function(){
// 获取id为android的元素
var and = document.getElementById("android");
// 返回#android的前一个兄弟节点（也可能获取到空白文本）
var ps = and.previousSibling;
// 返回#android的前一个兄弟元素，IE8及以下不支持
var pe = and.previousElementSibling;
alert(ps);
});
// 读取#username的value属性值
myClick(btn09, function(){
// 获取id为username的元素
var um = document.getElementById("username");
// 读取um的value属性值
// 文本框的value属性值，就是文本框中填写的内容
alert(um.value);
});
// 设置#username的value属性值
myClick(btn10, function(){
// 获取id为username的元素
var um = document.getElementById("username");
um.value = "下雨";
});
// 返回#bj的文本值
myClick(btn11, function(){
// 获取id为bj的元素
var bj = document.getElementById("bj");
alert(bj.innerHTML);
// 获取bj中的文本节点
var fc = bj.firstChild;
alert(fc.nodeValue);
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>成都</li>
<li>深圳</li>
</ul>
<br>
<p>你喜欢哪款游戏</p>
<ul id="game">
<li id="cj">绝地求生</li>
<li>王者荣耀</li>
<li>金铲铲</li>
<li>保卫萝卜</li>
</ul>
<br>
<p>你收集的操作系统是</p>
<ul id="phone">
<li id="android">Android</li>
<li>IOS</li>
<li>鸿蒙</li>
</ul>
</div>
<div class=""inner>
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
98 全选练习(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
/*
全选按钮：点击按钮之后，四个多选框全部被选中
*/
// 1. #checkedAllBtn
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBox = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// 获取四个多选框items
var items = document.getElementsByName("items");
// 遍历items
for(var i = 0; i < items.length; i++){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
// 设置四个多选框变成选中状态
items[i].checked = true;
}
};
// 2. #checkedNoBtn
// 3. #checkedRevBtn
// 4. #sendBtn
// 5. #checkedAllBox
// 6. items
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<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="提 交"/>
</form>
</body>
</html>
99 全选练习(2)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
// 获取四个多选框items
var items = document.getElementsByName("items");
/*
全选按钮：点击按钮之后，四个多选框全部被选中
*/
// 1. #checkedAllBtn
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBox = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// 遍历items
for(var i = 0; i < items.length; i++){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
// 设置四个多选框变成选中状态
items[i].checked = true;
}
};
/*
全不选按钮：点击按钮以后，四个多选框都变成没选中的状态
*/
// 2. #checkedNoBtn
// 为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0; i < items.length; i++){
// 将四个多选框设置为没选中状态
items[i].checked = false;
}
};
/*
反选按钮：点击按钮以后，选中的变成没选中，没选中变成选中
*/
// 3. #checkedRevBtn
// 为id为checkedRevBtn的按钮绑定一个单击响应函数
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].checked = !items[i].checked;
}
};
/*
提交按钮：点击按钮以后，将所有选中的多选框的value弹出
*/
// 4. #sendBtn
// 为id为sendBtn的按钮绑定一个单击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
/*
全选/全不选：当他选中时，其余的也选中，当他取消时，其余的也取消
在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
// 5. #checkedAllBox
// 为id为checkedAllBox的按钮绑定一个单击响应函数
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
//alert(this == checkedAllBox); // true
// 设置多选框的选中状态
for(var i = 0; i < items.length; i++){
//items[i].checked = checkedAllBox.checked;
items[i].checked = this.checked;
}
};
// 6. items
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<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="提 交"/>
</form>
</body>
</html>
100 全选练习(3)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
// 获取四个多选框items
var items = document.getElementsByName("items");
// 获取全选/全部选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");
/*
全选按钮：点击按钮之后，四个多选框全部被选中
*/
// 1. #checkedAllBtn
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// 遍历items
for(var i = 0; i < items.length; i++){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
// 设置四个多选框变成选中状态
items[i].checked = true;
}
// 将全选/全不选设置为选中
checkedAllBox.checked = true;
};
/*
全不选按钮：点击按钮以后，四个多选框都变成没选中的状态
*/
// 2. #checkedNoBtn
// 为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0; i < items.length; i++){
// 将四个多选框设置为没选中状态
items[i].checked = false;
}
// 将全选/全不选设置为选中
checkedAllBox.checked = false;
};
/*
反选按钮：点击按钮以后，选中的变成没选中，没选中变成选中
*/
// 3. #checkedRevBtn
// 为id为checkedRevBtn的按钮绑定一个单击响应函数
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
// 在反选时也需要判断四个多选框是否全都选中
checkedAllBox.checked = true;
for(var i = 0; i < items.length; i++){
items[i].checked = !items[i].checked;
if(!items[i].checked){
checkedAllBox.checked = false;
}
}
};
/*
提交按钮：点击按钮以后，将所有选中的多选框的value弹出
*/
// 4. #sendBtn
// 为id为sendBtn的按钮绑定一个单击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0; i < items.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
/*
全选/全不选：当他选中时，其余的也选中，当他取消时，其余的也取消
在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
// 5. #checkedAllBox
// 为id为checkedAllBox的按钮绑定一个单击响应函数
checkedAllBox.onclick = function(){
//alert(this == checkedAllBox); // true
// 设置多选框的选中状态
for(var i = 0; i < items.length; i++){
//items[i].checked = checkedAllBox.checked;
items[i].checked = this.checked;
}
};
// 6. items
/*
如果四个多选框全都选中，则checkedAllBox也应该选中
如果四个多选框都没选中，则checkedAllBox也不应该选中
*/
for(var i = 0; i < items.length; i++){
items[i].onclick = function(){
// 将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j = 0; j < items.length; j++){
// 判断四个多选框是否全选
// 只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断，则证明不是全选状态
// 将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<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="提 交"/>
</form>
</body>
</html>
标签：checked,
items,
JavaScript,
选中,
按钮,
var,
100,
选框,
96
From： https://blog.csdn.net/weixin_45980065/article/details/140632510