JavaScript简单实现全选反选框

偷个懒~ 样式就不写了，直接上HTML

<table><thead><tr><th><input type="checkbox" id="allOrNot"></th><th>菜名</th><th>饭店</th></tr></thead>    <tbody id="tbody"><tr><td><input type="checkbox"></td><td>西红柿鸡蛋</td><td>土豆丝</td></tr><tr><td><input type="checkbox"></td><td>西红柿鸡蛋</td><td>土豆丝</td></tr><tr><td><input type="checkbox"></td><td>西红柿鸡蛋</td><td>土豆丝</td></tr><tr><td><input type="checkbox"></td><td>西红柿鸡蛋</td><td>土豆丝</td></tr><tr><td><input type="checkbox"></td><td>西红柿鸡蛋</td><td>土豆丝</td></tr></tbody></table>

script

window.onload = function(){var topInp = document.getElementById("allOrNot");var tbody = document.getElementById("tbody");var inputList = tbody.getElementsByTagName("input");//全选框选了之后，下面的框全选topInp.onclick = function(){for( var i=0; i<inputList.length; i++ ){inputList[i].checked = this.checked;}}}
//给下面的所有小框框绑定事件(可以考虑事件委托)
for( var j=0; j<inputList.length; j++ ){inputList[j].onclick = function(){// 假设所有选框都选了var flag = true;for( var k=0; k<inputList.length; k++ ){// 如果有一个选框没选if( inputList[k].checked === false ){// 把标志设为falseflag = false;}}// 让全选框设为标志topInp.checked = flag;}}

JavaScript简单实现全选反选框相关推荐

axure实现复选框全选_jq简单的全选、反选和全不选效果
jquery是很实用和方便的前端效果库,可以让我减少很多的操作和节省很多的时间.今天,我们来说一下jq的全选.全不选和反选效果,本篇讲的是最简单简洁的jq全选.全不选和反选的例子.如果还有什么其他的功 ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
php输入文本框样式,【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 : 题目要求: 编写一个用户注册页面检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 : 代码如下 : 用户注册页面 .bg {back ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...

JavaScript简单实现全选反选框

偷个懒~ 样式就不写了，直接上HTML

script

JavaScript简单实现全选反选框相关推荐

最新文章

热门文章