JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦（初学）
有一些论坛，文章后台编辑都会出现选择框的操作。
1.实现选项框全选和取消全选的功能：
代码实现：
<!DOCTYPE html>
<html>
<head>
<title>全选功能</title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var aInput=document.getElementsByTagName('input');
oBtn.onclick=function(){
if(aInput[0].checked==false){
for(var i=0;i<aInput.length;i++){
aInput[i].checked=true;
}
oBtn.innerHTML="取消";
}else{
for(var i=0;i<aInput.length;i++){
aInput[i].checked=false;
}
oBtn.innerHTML="全选";
} }; }
</script>
</head>
<body>
<p id="btn">全选</p>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
</body>
</html>
2.鼠标划入出现下拉框的功能：此处使用了延时定时器的功能
代码实现：
<!DOCTYPE html>
<html>
<head>
<title>延时隐藏</title>
<style type="text/css">
#div1{width:400px;height:200px;background: #f00;}
#div2{width:300px;height: 100px;background: #ccc;margin: 10px;display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null;
oDiv1.onmouseover=oDiv2.onmouseover=function(){
oDiv2.style.display='block';
clearTimeout(timer);
}
oDiv1.onmouseout=oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display="none";
},300);
}
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦（初学）的更多相关文章
- jQuery 购物车鼠标经过出现下拉框的做法
这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- ...
- easyui combobox下拉框复制后再禁用，点击不会出现下拉框
easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...
- autocomplete.js的使用（1）：自动输入时，出现下拉选择框
autocomplete.js可以实现自动输入文本值,并出现下拉框 js引用:所需要的autocomplete文件需要在网站中自行下载. <!--自动输入文本值所需的jquery文件--> ...
- 用css写出下拉框（代码转自wq群）
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- Javascript实现全选按钮
Javascript实现全选按钮 效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...
- JavaScript实现全选功能
最终效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
随机推荐
- 使用OpenMP与AVX优化矩阵乘法
使用OpenMP与AVX优化矩阵乘法 由于课设内容做的太过简(mo)单(yu),于是在去年12月初的时候就计划写三篇博客随笔作为实验报告,前两篇简单介绍了OpenMP和SIMD指令进行铺垫,本篇将会介 ...
- defer 延迟调用【GO 基础】
〇.前言 在 Go 语言中,defer 是一种用于延迟调用的关键字. defer 在 Go 语言中的地位非常重要,它是确保资源正确释放和程序健壮性的关键字. 本文将通过示例对其进行专门的详解. 一.d ...
- AtCoder Grand Contest 037(without F)
AGC037 A - Dividing a String 洛谷传送门 AGC037A 分析 考虑每一段长度只可能是一或二,设 \(dp[i]\) 表示以 \(i\) 为结尾的前缀最多可以分成多少段. ...
- #树状数组，欧拉函数#CF594D REQ
题目 给定 \(n\) 个数,求 \(\varphi(\prod_{i=l}^r{a_i})\) 分析 考虑单个欧拉函数的求法,只需要求出这个数的质因数计算即可. 那么考虑离线,枚举右端点,记录每个质 ...
- #Tarjan，树的直径#CF1000E We Need More Bosses
题目 给定一个\(n\)个点\(m\)条边的无向图,找到两个点\(s,t\),使得\(s\)到\(t\)必须经过的边最多 分析 桥就是必须经过的边,考虑给无向图缩点, 按照桥建一棵树,那么就转换成了求 ...
- #换根dp#洛谷 2986 [USACO10MAR]Great Cow Gathering G
题目 分析 处理出所有点到根节点的答案,然后换根依次求最小值 代码 #include <cstdio> #include <cctype> #define rr registe ...
- Wasm软件生态系统安全分析
演讲嘉宾 | 王浩宇 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 王浩宇,华中科技大学教授,博士生导师,华中科技大学OpenHarmony技术俱乐部主任.研究关注于新兴软件系统中的安全. ...
- Spring内存马分析
环境搭建 踩了很多坑....,不过还好最后还是成功了 IDEA直接新建javaEE项目,然后记得把index.jsp删了,不然DispatcherServlet会失效 导入依赖: <depend ...
- Windows 杀毒简单有效的方式
Windows 电脑杀毒通常会选择杀毒软件,这样太笨重,且容易占内存和存在流氓软件侵入. 推荐使用 Windows 自带的恶意软件删除工具 按住 Win + R 键,弹出运行窗口,输入 mrt. 系统 ...
- 批处理及有状态等应用类型在 K8S 上应该如何配置?
众所周知, Kubernetes(K8S)更适合运行无状态应用, 但是除了无状态应用. 我们还会有很多其他应用类型, 如: 有状态应用, 批处理, 监控代理(每台主机上都得跑), 更复杂的应用(如:h ...