JavaScript 全选函数的实现

Html代码：

<table id="purchase-info" class="table table-bordered table-hover table-striped" cellspacing="0"  width="100%" align="center"><caption>采购清单</caption><thead><tr><td><input class="allChoose" type="checkbox" onclick="selectAll()"></td><th>物品编号</th><th>物品名称</th><th>物品分类</th><th>规格型号</th><th>供应商</th><th>采购人员</th><th>采购数量</th><th>备注</th><th>入库操作</th></tr></thead><tbody id="purchase-item"><tr><td><input class="choose" type="checkbox"/></td><td>001</td><td>真彩水性笔</td><td>文具</td><th>盒（12支）</th><th>上海真彩文具店</th><th>小王</th><th>50</th><th>无备注</th><td><button id="inStorage">入库</button></td></tr><tr><td><input class="choose" type="checkbox"/></td><td>001</td><td>真彩水性笔</td><td>文具</td><th>盒（12支）</th><th>上海真彩文具店</th><th>小王</th><th>50</th><th>无备注</th><td><button id="inStorage">入库</button></td></tr></tbody>
</table>

JavaScript 代码：

//全选功能函数
function selectAll(){var allChoose=document.getElementsByClassName("allChoose")[0];var list=document.getElementsByClassName("choose");if(allChoose.checked){for(var i= 0;i<list.length;i++){list[i].checked=true;}return true;}else{for(var i=0;i<list.length;i++){list[i].checked=false;}return false;}
}

效果如下：

JavaScript 全选函数的实现相关推荐

一秒换一张图以及checkbox全选函数
类似效果: setInterval(函数,时间间隔):时间间隔最小设置为1000,相当于一秒执行一次函数 2000=2s 依次类推 . onfocus 得到光标 onblur失去光标或失去焦点. & ...
html中全选按钮代码怎么写,html中的javascript 全选/取消全选操作示例代码
复制代码代码如下: 无标题文档 function selectAllDels() { var allCheckBoxs = document.getElementsByName("preDe ...
JavaScript实现复选框的全选/全不选和批量选择
实现数据的批量选择以及全选/全部选功能的效果如下所示: 代码如下: <a class="btn btn-default" id="search_like" ...
Jquery第二章常用方法，一二级菜单淡入淡出，event事件，复选框的全选反选第一节
hide() show() 通过滑动效果 slideToggle() 淡入淡出 fadeIn() fadeout() 向上向下拉动 slideup() slidedown() 源码: <!DO ...
前端学习（2282）全选和反选问题
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
Html中 table,list等表格中 js 的 Checkbox全选，反选，单选，获取数据选中行的写法
一:Html页面: <table cellpadding="1" cellspacing="1"> <thea ...
【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选界面: 代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
js实现复选框的全选、取消全选、反选
思路很简单: 全选:将所有复选框的checked设置为true 取消全选:将所有复选框的checked设置为false 反选:将所有选中的复选框设置为false,未选中的设置为true.即将check ...

JavaScript 全选函数的实现

JavaScript 全选函数的实现相关推荐

最新文章

热门文章