js全选、取消全选代码

PROMULGATOR

SummerXIXI

山东省潍坊市

← tab栏切换代码

→ jQuery轮播图代码

相关代码

js全选、取消全选代码

原生js实现全选和反选

js全选反选效果(原创)

全选，反选，取消全选功能示例

全选反选案例

jquery实现全选非全选

原生JS 实现简单的全选反选

Html

Css

Js

table {
	width:400px;
	margin:100px auto;
}
table tr {
	background-color:#ccc;
}
table tr td {
	background-color:#FFFFFF;
	padding:10px;
	border:1px solid #EFEFEF;
}

var tbody = document.getElementById('tbody');
var all = document.getElementById('all');
// 数据
var date = [{
    product: '小米',
    price: '5999'
}, {
    product: '小米',
    price: '4999'
}, {
    product: '小米',
    price: '3999'
}, {
    product: '小米',
    price: '2999'
}, {
    product: '小米',
    price: '1999'
}, {
    product: '小米',
    price: '999'
}, {
    product: '小米',
    price: '99'
}];
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;
    })
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js全选、取消全选代码



代码描述：js全选、取消全选,反选代码

更新时间：2021-04-06 15:44:25

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js全选、取消全选代码-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号