练习要求:
制作一个选择页面,选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能,包含了JS的DOM操作事件中的大部分知识点以及强烈的逻辑思维能力的锻炼,,非常适合所有学习JS中DOM操作知识点的伙伴们去练习,可以这样说,把这个练习完成后,JS的DOM操作就掌握的差不多了!!!
项目功能:
1.#checkedAllBtn 全选按钮 - 点击按钮以后,四个多选框全都被选中
2.#checkedNoBtn 全不选按钮 - 点击按钮以后,四个多选框全都不被选中
3.#checkedRevBtn 反选按钮 - 点击按钮以后,四个多选框全都变成相反选中状态
4.#sendBtn 提交按钮 - 点击按钮以后,所点击的框的内容依次被弹出窗口显示
5.#checkedAllBox 全选/全不选按钮 - 点击按钮以后,四个多选框全都被选中或者全不被选中,且该按钮状态要和1中的全选按钮以及2中的全不选按钮的状态保持一致
6.#items 如果四个多选框全都被选中,则1中checkedAllBox按钮也应该被选中, 如果四个多选框没都选中,则checkedAllBox也不应该选中(即只要有一个选框没有被选中,1中的按钮就不会被选中)
这6个功能中,前4个功能相对比较容易实现,后两个功能相对难一点,而且后两个功能也是建立在前4个功能都能实现的基础上才能进一步实现的,其具体设计编写思路需要伙伴们仔细认真反复思考后再去编写,因为有一点关系没有考虑到,功能就可能会出不来
代码演示:
接下来是小博主的代码演示分享(温馨提示:希望伙伴们先自己去练习后再拿来进行对比和改进,这样的话,伙伴们才能得到很大很快的质的进步)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选练习</title>
<script type="text/javascript">
window.onload = function(){
var checkedAllBox = document.getElementById("checkedAllBox")
// 1.#checkedAllBtn
// 全选按钮 - 点击按钮以后,四个多选框全都被选中
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn")
checkedAllBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
}
// 2.#checkedNoBtn
// 全不选按钮 - 点击按钮以后,四个多选框全都不被选中
// 为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function(){
var items = document.getElementsByName("items");
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(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = !items[i].checked;
}
// 在反选时也需要判断四个多选框是否全都选中
// 将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++){
if (!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
// 4.#sendBtn
// 提交按钮 - 点击按钮以后,所点击的框的内容依次被弹出窗口显示
// 为id为sendBtn的按钮绑定一个单击响应函数
var sendBtn = document.getElementById("sendBtn")
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
if (items[i].checked){
alert(items[i].value)
}
}
}
// 5.#checkedAllBox
// 全选/全不选按钮 - 点击按钮以后,四个多选框全都被选中后者全不被选中
// 为id为checkedAllBox的按钮绑定一个单击响应函数
var checkedAllBox = document.getElementById("checkedAllBox")
checkedAllBox.onclick = function(){
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].checked = this.checked;
}
}
// 6.#items
// 如果四个多选框全都被选中,则checkedAllBox也应该被选中
// 如果四个多选框没都选中,则checkedAllBox也不应该选中
// 为四个多选框分别绑定单击响应函数
var items = document.getElementsByName("items");
for (var i=0; i<items.length; i++){
items[i].onclick = function(){
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++){
if (!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是?<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>
结果展示:
希望此次分享能给大家带来一些前端网页以及JS知识上的帮助(喜欢小编的关注、点赞走一波呦,后期会不定期分享更多Python、JS和前端相关知识)