JavaScript实现全选和取消全选

源代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>表格全选/取消全选</title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style>
</head>
<body><div class="wrap"><table><thead><tr><th><!-- 开始默认补选中 checked="checked" --><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>// 1. 实现全选和取消全选功能// 将下面所有复选框的 checked 属性(选中状态)依附上面全选复选框即可// 1.1 获取获取上面复选框元素对象var chA = document.querySelector("#j_cbAll");// 1.2 获取下面所有复选框元素对象var ches = document.querySelector("#j_tb").querySelectorAll("input");// 核心功能:// 绑定事件 处理事件程序// 难点2. 下面复选框需要全部选中，上面复选框才能被选中for(var i = 0; i < ches.length; i++){ches[i].onclick = function (){for (var j = 0; j < ches.length; j++){if (!ches[j].checked){break;}}if (j >= ches.length){chA.checked = true;}else{chA.checked = false;}}}// 2.1 给下面所有复选框 都要 绑定点击事件chA.onclick = function (){for (var i = 0; i < ches.length; i++){ches[i].checked = chA.checked;}}</script>
</body>
</html>

运行结果

JavaScript实现全选和取消全选相关推荐

php 复选框全选和取消,基于JavaScript实现复选框的全选和取消全选
这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考, ...
复选框的全选和取消全选
复选框的全选和取消全选 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
js实现复选框的全选、取消全选、反选
思路很简单: 全选:将所有复选框的checked设置为true 取消全选:将所有复选框的checked设置为false 反选:将所有选中的复选框设置为false,未选中的设置为true.即将check ...
react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行
.net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下: 代码如下,有注解,相信大家都看得明白: using Syst ...
vue全选和取消全选（无bug）
很简单的使用vue实现全选和取消全选直接上代码,简单易懂不懂得可以留言. <!DOCTYPE html> <html lang="en"> <hea ...
实现全选和取消全选功能
<body> <div class="wrap"> <table> <thead> <tr> <th> &l ...

JavaScript实现全选和取消全选

源代码

运行结果

JavaScript实现全选和取消全选相关推荐

最新文章

热门文章