全选反选JavaScript实现

Myth丶恋晨 2022-05-27 12:36 234阅读 0赞

**html代码**

<label for="all">全选</label><input type="checkbox" id="all">
    <div id="box">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>

**JS代码**

var all = document.getElementById("all");
        var aInput = document.querySelectorAll("#box>input");
        all.onclick = function () {
            if (this.checked) {
                for (var i = 0; i < aInput.length; i++) {
                    aInput[i].checked = true;
                }
            } else {
                for (var i = 0; i < aInput.length; i++) {
                    aInput[i].checked = false;
                }
            }
        };
    
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].onclick = function () {
                var bStop = true;
                for (var K = 0; K < aInput.length; K++) {
                    if (!aInput[K].checked) {
                        bStop = false;
                        break;
                    }
                }
    
                if (bStop) {
                    all.checked = true;
                } else {
                    all.checked = false;
                }
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 77 阅读

相关用 JS（JavaScript ）实现多选、全选、反选

JS小例题学习内容：需求总结：学习内容：需求用 JavaScript 实现全选、反选、多选实现代码 <!D

╰+哭是因爲堅強的太久メ/ 2023年01月16日 03:29/ 0 赞/ 219 阅读

相关 javascript全选、反选

<!DOCTYPE html> <html> <head> <title>test</title> </head> <body

谁借莪１个温暖的怀抱￠/ 2022年12月29日 00:15/ 0 赞/ 185 阅读

相关 javascript--全选、取消全选、反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年09月21日 13:26/ 0 赞/ 232 阅读

相关 JavaScript简单实现全选反选框

偷个懒~ 样式就不写了，直接上HTML <table> <thead> <tr>

逃离我推掉我的手/ 2022年05月28日 03:42/ 0 赞/ 186 阅读

相关全选反选JavaScript实现

html代码 <label for="all">全选</label><input type="checkbox" id="all"> <div id="box

Myth丶恋晨/ 2022年05月27日 12:36/ 0 赞/ 235 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 240 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 277 阅读

相关 JavaScript实现全选、反选、不选功能

实现代码： <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input

叁歲伎倆/ 2022年02月15日 08:06/ 0 赞/ 300 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 586 阅读