全选,不选,反选js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{border-top:#333 10px solid;}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aIpt=oDiv.getElementsByTagName('input');
//全选
oBtn.onclick=function(){
for(var i=0;i<aIpt.length;i++){
aIpt[i].checked=true;
}
};
//不选
oBtn2.onclick=function(){
for(var i=0;i<aIpt.length;i++){
aIpt[i].checked=false;
}
}; //反选
oBtn3.onclick=function(){
for(var i=0;i<aIpt.length;i++){
aIpt[i].checked=!aIpt[i].checked;
}
};
};
</script>
</head> <body> <input type="button" value="全选" id="btn1">
<input type="button" value="不选" id="btn2">
<input type="button" value="反选" id="btn3"> <div id="div1">
<input type="checkbox" checked="true"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</div> </body>
</html>
全选,不选,反选js的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- 原生js实现在表格用鼠标框选并有反选功能
今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...
- ExtJS中,将Grid表头中的全选复选框取消复选
今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...
- JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能
JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- WPF: 实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
- WPF实现带全选复选框的列表控件
本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...
- jQuery实现获取选中复选框的值
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...
随机推荐
- 接着上一篇 《Is WPF dead》
最近美国的PM传来消息,说微软在收集开发者的意见,会对WPF进行改进,微软会主要在1) performance 2) interop 3) touch and 4) access to WinRT A ...
- 汇编学习(二)——8086CPU
一.8086CPU 1.微处理器 (1)微控制机:也称单片机 (2)DSP芯片:数字信号处理芯片 (3)嵌入式微处理器 (4)通用微处理器:PC站.工作站.服务器使用的处理器 2.内部结构: (1)总 ...
- 如何创建一个Android项目
第一步: File -->New ---->Android Application Project 点击创建 第二步:接下来是几个下拉选择框. Minimum Required SDK 是 ...
- 《DSP using MATLAB》示例Example5.4
- 《DSP using MATLAB》示例Example5.1
终于看到第5章了,继续努力,加油!!! 代码: xn = [0, 1, 2, 3]; N =4; Xk = dfs(xn,N) 用到的dfs函数: function [Xk] = dfs(xn,N) ...
- 分享Kali Linux 2016.2第49周镜像文件
分享Kali Linux 2016.2第49周镜像文件 Kali Linux官方于12月4日发布Kali Linux 2016.2的第49周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...
- 记一次Runtime的巧用
背景 我们的视频直播是用的大华乐橙的解决方案,而他们近期出来个新的SDK,并且对老版SDK不兼容,而这周,终于把大华乐橙的新版SDK切换了,和这一周做的新的东西,一起提交审核了,并且今天也通过审核了. ...
- BFS+Hash(储存,判重) HDOJ 1067 Gap
题目传送门 题意:一个图按照变成指定的图,问最少操作步数 分析:状态转移简单,主要是在图的存储以及判重问题,原来队列里装二维数组内存也可以,判重用神奇的hash技术 #include <bits ...
- HTML无序列表和有序列表
html无序列表<ul><li></li></ul> ul属性设定:<ul type="square"> 常用属性值 ...
- angularjs学习资料
API http://www.yiibai.com/angularjs/angularjs_scopes.html 视频 http://v.youku.com/v_show/id_XNjQ3MjA1N ...