JavaScript全选与单选实现-优快云博客

本文链接：https://blog.youkuaiyun.com/joys_wkx/article/details/103350395

本文介绍了如何在JavaScript中实现复选框的全选和单选功能。通过设置全选按钮并遍历所有复选框修改checked属性，可以轻松完成全选操作。此外，还提及了单选操作的相关实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格复选框的操作

首先来写一个简单的复选框
如图：
图片效果
1、全选(2种)
a、首先用变量All_election来接受全选按钮
b、点击全选按钮时，遍历下面的所有复选框，让checked的值统一

all.onclick = function() {
     var inp = document.querySelectorAll("tbody td:first-child>input");
     for (var i = 0; i < inp.length; i++) {
         inp[i].checked = this.checked
     }
 }

第二种：

//全选全部选的时候
        function isall(res) {
            for (var i = 0; i < inp.length; i++) {
                 inp[i].checked = res;
				
            }
        }
        //点击时判断全选全不选
        all.onclick = function() {
            if (all.checked) {
                isall(true)
            } else {
                isall(false)
            }
        }

2、单选时

//单个按钮操作时
        var inp1 = document.querySelectorAll("tbody td:first-child>input");
        // console.log(inp1)
        for (var i = 0; i < inp1.length; i++) {
            inp1[i].onclick = function() {
                if (!this.checked) {
                    all.checked = false
                } else {
                    //所有单个选取按钮的属性都不为checked的时
                    var inp2 = document.querySelectorAll("table>tbody td:first-child input:not(:checked)");
                    console.log(inp2)
                    if (inp2.length == 0) { //首先判断不为checked的长度，长度为0时 ，就是所有的都被选中了
                        all.checked = true; //此时全选框的属性值都被选中，为 true
                    } else {
                        all.checked = false
                    }
                }
            }

        }