js全选练习

最新推荐文章于 2022-09-27 16:50:36 发布
最新推荐文章于 2022-09-27 16:50:36 发布
阅读量97 收藏
点赞数
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_ve/article/details/119756608
版权

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style>

        

body {

    width: 800px;

    margin-left: auto;

    margin-right: auto;

}

button {

    width: 300px;

    margin-bottom: 10px;

}

#btnList {

    float:left;

}

#total{

    width: 450px;

    float:left;

}

ul{

    list-style-type: none;

    margin: 0px;

    padding: 0px;

}

.inner li{

    border-style: solid;

    border-width: 1px;

    padding: 5px;

    margin: 5px;

    background-color: #99ff99;

    float:left;

}

.inner{

    width:400px;

    border-style: solid;

    border-width: 1px;

    margin-bottom: 10px;

    padding: 10px;

    float: left;

}

        <style>

    <title>全选练习</title>

    <script>

        window.onload = function () {

            // 获取全选复选框

            var checkedAllBox = document.getElementById('checkedAllBox')

            //获取4个items 

            var items = document.getElementsByName("items")

            // 全选

            var checkedAllBtn = document.getElementById('checkedAllBtn')

            checkedAllBtn.onclick = function () {

                for (var i = 0; i < items.length; i++) {

                    items[i].checked = true

                }

                checkedAllBox.checked = true

            }

            //全不选按钮

            var checkedNoBtn = document.getElementById('checkedNoBtn')

            checkedNoBtn.onclick = function () {

                for (var i = 0; i < items.length; i++) {

                    items[i].checked = false

                }

                checkedAllBox.checked = false

            }

            //反选按钮

            var checkedRevBtn = document.getElementById('checkedRevBtn')

            checkedRevBtn.onclick = function () {

                checkedAllBox.checked = true

                for (var i = 0; i < items.length; i++) {

                    // if(items[i].checked){

                    //     items[i].checked = false

                    // }else{

                    //     items[i].checked = true

                    // }

                    items[i].checked = !items[i].checked

                    if (items[i].checked === false) {

                        checkedAllBox.checked = false

                    }

                }

            }

            // 全选或者不全选的复选框

            checkedAllBox.onclick = function () {

                for (var i = 0; i < items.length; i++) {

                    items[i].checked = this.checked

                }

                // console.log(this.checked)

                // if(this.checked){

                //     for(var i = 0; i < items.length; i++){

                //         items[i].checked = true

                //     }

                // }else{

                //     for(var i = 0; i < items.length; i++){

                //         items[i].checked = false

                //     }

                // }

            }

            // 监听4个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 === false) {

                            checkedAllBox.checked = false

                        }

                    }

                }

            }

        }

    </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>

陌阳里
关注
专栏目录
JavaScript-全选练习
主营前端方向，技术栈是vue
01-07 1056
全选练习: 1 全选按钮; 2 全不选按钮; 3 反选按钮; 4 提交按钮; 5 全选/全不选; 6 全选/全不选和多选框动态绑定;
JS_DOM练习_全选练习_
陈雅萍的博客
06-03 439
一、题目要求 点击全选时五个复选框全部选中，点击全不选时五个复选框都不选择。 点击反选的时候，反向选择第二行其他复选框。 点击提交则弹出提示框显示选择内容。 二、代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onloa
js-全选练习
flowerxxxxx的博客
02-05 419
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { //获取四个多选框items var item
11.JS全选练习.zip
01-29
在“11.JS全选练习.mp4”视频教程中，很可能会详细讲解这些概念，并通过实例演示如何创建一个全选功能，包括如何获取和操作DOM元素，以及如何添加和处理事件监听器。观看这个视频，将有助于你深入理解和实践...
JS中的全选练习（包含思路）
Fantasc的博客
08-04 307
以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
JS做一个全选和取消全选案例
qq_45992734的博客
09-27 645
每点击一个商品，都判断商品checked === true的数量是否等于商品的个数，等于则全选的checked为true，否则为false。场景：当你点击全选时，商品列表全部选中，取消全选时，商品列表全部未选中。选择几件商品但没全选时，全选的复选框未选中。获取到元素，并且在全选上绑定一个事件，将商品的checked全部和全选框一样。
js全选的练习
COURAGE0316的博客
05-14 287
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;!--使用复选框上面的一个属性判断是否选中 checked属性 checked=true 选中 checked=false 不选中 *创建一个页面 复选框和按钮 四个复选框表示爱好 还有一个复选框操作：全选和全不选，有一个事件 --&gt; &lt;head&gt; &lt;meta chars...
JS练习 - 全选
BarryLee的博客
02-08 218
JS新手练习题，先上个图 HTML代码：   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;!-- 需求： 1.点击全选checkbox或者全选按钮 - 全选 2.点击全不选 - 全不选 3.点击反选 - 反选 4.点击提交 - alert出来就OK 5.选择爱好，如果全部都选了，全选che...
js基础——全选练习
jwz934738949的博客
08-30 309
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选练习</title> <script> window.onload = function () { var...
JS必做——全选练习
Fleehom的博客
09-27 1626
练习要求： 制作一个选择页面，选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能，包含了JS的DOM操作事件中的大部分知识点以及强烈的逻辑思维能力的锻炼，，非常适合所有学习JS中DOM操作知识点的伙伴们去练习，可以这样说，把这个练习完成后，JS的DOM操作就掌握的差不多了！！！ 项目功能： 1.#checkedAllBtn 全选按钮 - 点击按钮以后，四个多选框全都被选中 2.#checkedNoBtn 全不选按钮 - 点击按钮以后，四个多选框全都不被选中 3.#check...
js基础-全选练习
不闻钟的博客
05-16 88
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全选练
javascript 全选练习
人终将被少年不得之物困扰一生的博客
01-17 207
今天晚上看了下尚硅谷的JavaScript教学视频，学习了一下一点小东西，把它贴出来与大家分享一下 代码： <html> <head> <style> </style> <script> window.onload=function...
JS基础-input全选练习题
linqunbin的博客
05-25 480
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js-案例：全选框练习
zhulin0519的博客
11-16 880
简单的效果如图所示，完整代码如下： <html> <head> <title>HTML示例</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="selAllNo" onclick="selAllNo();"/>全选/全不选<br/> <input type="ch
JavaScript练习之全选反选练习
靡不有初鲜克有终
02-11 388
<!-- 作者：1377378268@qq.com 时间：2017-02-11 描述：单选框事件练习 点击全选按钮，所有复选框都被选上，点击全不选按钮，所有复选框都被取消 如图所示 --> 实现代码： 全选练习 window.onload = function(){ //获取所有的item列表 var items =
JavaScript全选、全不选、反选小练习
C.
11-11 447
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>check.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="
js全选按钮
最新发布
06-02
实现JS全选按钮的基本思路是：通过监听全选按钮的点击事件，来改变其他复选框的选中状态。以下是一个简单的实现方法： HTML代码： ``` <input type="checkbox" id="select-all"> 全选 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值