利用纯js实现表格全选功能

如何利用纯js做一个表格checkbox全选功能？下面web建站小编给大家详细介绍一下具体步骤！

具体代码如下：

//复制表格id
var tbody = document.getElementById('tbody');

//全选id
var allSelect = document.getElementById('allSelect');

// 表格赋值数据
var date = [{
  name: '玉皇大帝',
  age: '59990'
}, {
  name: '孙悟空',
  age: '39982'
}, {
  name: '猪八戒',
  age: '46666'
}];
Sdate(date);

// 1、渲染数据
function Sdate(mydate) {
  // (1) 遍历数组对象
  mydate.forEach(function(value) {
    // (2) 创建tr标签
    var tr = document.createElement('tr');
    tr.innerHTML = '<td><input type="checkbox"></td><td>' + value.product + '</td><td>' + value.price + '</td>';
    // (3) 插入tr标签
    tbody.appendChild(tr);
  });
}

// 2、全选和取消全选
var tb_chekbox = tbody.querySelectorAll('input');
// console.log(tb_chekbox);
all.addEventListener('click', function() {
  for (var i = 0; i < tb_chekbox.length; i++) {
    tb_chekbox[i].checked = this.checked;
  }
});

// 下面复选框只要有没有选中的，上面的全选框就不选中
for (var i = 0; i < tb_chekbox.length; i++) {
  tb_chekbox[i].addEventListener('click', function() {
    var flag = true; // 控制全选框的状态
    for (var i = 0; i < tb_chekbox.length; i++) {
      if (!tb_chekbox[i].checked) {
        flag = false;
      }
    }
    all.checked = flag;
  })
}

vue如何利用computed实现全选功能

el-checkbox点击全选后再点击单选功能错乱解决方法

标签： 全选

上面是“利用纯js实现表格全选功能”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3095.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！