js实现全选和反选

简介: js实现全选和反选

现在有一个全选按钮

然后每一列的是循环出来的

先获取到全选框和循环出来的框

let radius = document.getElementById('radio')
let cks = document.querySelectorAll("#j input");

然后给全选框绑定一个事件

//当点击全选框的时候让所有循环出来的复选框的checked变为true
redius.onclick = function() {
    for (let i = 0; i < cks.length; i++) {
//已知cks是循环出来的所有复选框
      cks[i].checked = true;
        if(redius.checked == false){
          cks[i].checked = false;
          }
        }
      }
//这个判断代表的是如果全选框的checked为false也就是未选中的情况下这些循环出来的复选框复制为未被选中

下一步给循环出来的复选框每一个都绑定一个事件

for (var i = 0; i < cks.length; i++) {
        cks[i].onclick = fn;
      }

最后一步

function fn() {
        var flag = true; //默认都被选中了
        //判断是否所有的复选框都选中
        for (var j = 0; j < cks.length; j++) {
          if (!cks[j].checked) {
            flag = false;
            break;
          }
        }
        redius.checked = flag;
      }


相关文章
|
6月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
188 1
|
5月前
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
杨老师课堂之JavaScript案例全选、全不选、及反选
30 1
|
5月前
|
JavaScript 程序员
老程序员分享:js实现复选框的全选、全部选和反选
老程序员分享:js实现复选框的全选、全部选和反选
27 0
|
6月前
|
JavaScript 前端开发
JavaScript解决多选框全选、全不选和反选的问题
JavaScript解决多选框全选、全不选和反选的问题
32 0
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
522 0
|
6月前
|
JavaScript
|
JavaScript
js的全选和反选的具体实现
js的全选和反选的具体实现
40 0
|
JavaScript
js简单全选及反选demo效果示例(整理)
js简单全选及反选demo效果示例(整理)
|
JavaScript 前端开发
JavaScript 实现全选、单选和反选
JavaScript 实现全选、单选和反选
107 0
|
存储 JavaScript
js实现多选、全选、反选、取消选择(篇一)
js实现多选、全选、反选、取消选择(篇一)
388 0
js实现多选、全选、反选、取消选择(篇一)