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实现复选框(全选/全不选/反选)效果【含完整代码】
84 1
|
6天前
|
JavaScript
|
9月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
402 0
|
7月前
|
JavaScript
js的全选和反选的具体实现
js的全选和反选的具体实现
21 0
|
8月前
|
JavaScript
js简单全选及反选demo效果示例(整理)
js简单全选及反选demo效果示例(整理)
|
9月前
|
JavaScript 前端开发
JavaScript 实现全选、单选和反选
JavaScript 实现全选、单选和反选
|
存储 JavaScript
js实现多选、全选、反选、取消选择(篇一)
js实现多选、全选、反选、取消选择(篇一)
333 0
js实现多选、全选、反选、取消选择(篇一)
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
157 0
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084      JavaScript案例之全选、全不选、及反选 效果图: 思路:     1.
1015 0