练习要求
制作一个选择页面 选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能 包含了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 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 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 i items.length; i ){
items[i].checked !items[i].checked;
// 在反选时也需要判断四个多选框是否全都选中
// 将checkedAllBox设置为选中状态
checkedAllBox.checked true;
for (var j 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 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 i items.length; i ){
items[i].checked this.checked;
// 6.#items
// 如果四个多选框全都被选中 则checkedAllBox也应该被选中
// 如果四个多选框没都选中 则checkedAllBox也不应该选中
// 为四个多选框分别绑定单击响应函数
var items document.getElementsByName( items
for (var i i items.length; i ){
items[i].onclick function(){
checkedAllBox.checked true;
for (var j 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和前端相关知识
