有一些论坛，文章后台编辑都会出现选择框的操作。

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实例集锦（初学）的更多相关文章

  1. jQuery 购物车鼠标经过出现下拉框的做法

    这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- ...

  2. easyui combobox下拉框复制后再禁用，点击不会出现下拉框

    easyui combobox下拉框禁用,点击不会出现下拉框 需要做到,在给easyui combobox赋值后,再禁用easyui combobox 解决办法: $("#time-sele ...

  3. autocomplete.js的使用（1）：自动输入时，出现下拉选择框

    autocomplete.js可以实现自动输入文本值,并出现下拉框 js引用:所需要的autocomplete文件需要在网站中自行下载. <!--自动输入文本值所需的jquery文件--> ...

  4. 用css写出下拉框（代码转自wq群）

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  5. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  6. Javascript实现全选按钮

    Javascript实现全选按钮 效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...

  7. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  9. JavaScript实现全选功能

    最终效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  10. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

随机推荐

  1. k-均值聚类算法 Primary

    目录 案例--区分好坏苹果(有Key) 案例--自动聚类(无Key) k-均值聚类算法(英文:k-means clustering) 定义: k-均值聚类算法的目的是:把n个点(可以是样本的一次观察或 ...

  2. #模拟#U137456 数字

    题目 牛牛和他的小伙伴们高高兴兴的吃完了蛋糕,吃完蛋糕之后就到了牛牛和他的小伙伴们最喜欢的环节了--猜数 字, 这次是牛牛的生日,大家决定让牛牛来制定规则,由于牛牛的生日是4月7日,所以牛牛特别喜欢数 ...

  3. 一种基于DeltaE(CIE 1976)的找色算法Cuda实现

    书接上文 一种基于DeltaE(CIE 1976)的找色算法 Delta E 是评估色彩准确度的重要测量指标.摄影师.影片编辑和平面设计师等创意专业人士都应重视这项标准,因其是选择专业级显示器的重要考 ...

  4. sqli_lab Less1练习笔记

    首先观察页面信息,看有没有提示. 很显然,这个页面让我们传入id这个参数(根据题目的分支,应该是get方法) 使用HackBar进行传入参数,首先传入id=1 http://localhost/sql ...

  5. go语言结构体使用小结

    转载请注明出处: 在Go语言中,结构体(struct)是一种复合数据类型,它允许你将多个不同类型的字段组合成一个单一的类型.结构体为数据的封装和抽象提供了便利,使得数据组织更加清晰和易于管理. 结构体 ...

  6. CSS 布局专题

    0x01 浮动布局 (1)常见网页布局 顶部商标栏(Logo):展示网站的标志.名称以及具有代表性的图片 导航栏(Navigation):展示网站大概的分类 左侧边栏(Left-side Bar):展 ...

  7. centos6.5源码编译http2.4.9、虚拟主机、基于用户认证

    centos6.5源码编译http2.4.9.虚拟主机.基于用户认证 2014-04-23 07:45  作者: 51linux  来源: 本站  浏览: 0 views  我要评论  字号: 大 中 ...

  8. 第四章：if else switch使用

    /* * @Issue: 输入整数a和b,若a²+b²大于100,则输出a²+b²之和的百位以上的数字,否则直接输出a²+b²的和 * @Author: 一届书生 * @LastEditTime : ...

  9. 一个.NET内置依赖注入的小型强化版

    前言 .NET生态中有许多依赖注入容器.在大多数情况下,微软提供的内置容器在易用性和性能方面都非常优秀.外加ASP.NET Core默认使用内置容器,使用很方便. 但是笔者在使用中一直有一个头疼的问题 ...

  10. 开源在线表单工具 HeyForm 使用教程

    HeyForm 是一个非常出色的开源在线表单工具,可以通过直观的拖拽式编辑器,快速构建出美观实用的表单. HeyForm 的功能非常丰富: 支持丰富的输入类型,从基础的文本.数字到高级的图片选择.日期 ...