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

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. Unit 1 Computer hardware【石家庄铁道大学-专业英语课程复习资料】

    Unit 1 Computer hardware 1.Introduction of computer A computer is a machine that can be instructed t ...

  2. Python字典遍历

    1 def dict_test(): 2 #初始化字典 3 dict= {"a1":"1","a2":"2"," ...

  3. 深究可见性，原子性，有序性的解决方案之volatile源码解析

    上节java内存模型(jmm)概念初探大致了解了由于cpu的快速发展,导致的越来越复杂的内存模型诞生,java内存模型相当于是底层内存模型的映射(实际并不是一一映射,但可以借鉴理解),也是衍生出并发三 ...

  4. 华为会员开放服务（Membership Kit），助力移动应用快速建设会员生态

    会员开放服务(Membership Kit)是华为面向开发者提供的券码开放能力,开发者可以通过Membership Kit开展灵活多样的营销活动,助力开发者建设会员生态,实现用户运营与增量创收的目标. ...

  5. 基于istio实现单集群地域故障转移

    本文分享自华为云社区<基于istio实现单集群地域故障转移>,作者:可以交个朋友. 一 背景 随着应用程序的增长并变得更加复杂,微服务的数量也会增加,失败的可能性也会增加.微服务的故障可能 ...

  6. HarmonyOS“一次开发，多端部署“优秀实践——玩机技巧，码上起航

    随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间按需调用.互助共享,让用户享受无缝的全场景体验.作为应用开发者,广泛的设备类型也能为应用带来广大的潜 ...

  7. 喜报|HarmonyOS开发者社区连获业内奖项，持续深耕开发者生态

     临近年末,各大平台陆续揭晓年度榜单,表彰了具备强大影响力与做出突出贡献的优秀项目与团队,而HarmonyOS开发者社区作为技术分享,学习和展示的平台,输出高质量技术文章百余篇,连续获得业内各大奖项, ...

  8. 正则表达针对html(九)

    前言 关于处理一些html的东西. 正文 假设有一段html文本: <?xml version="1.0" encoding="UTF-8"?> & ...

  9. Ajax 原理是什么？如何实现？

    一.是什么 AJAX全称(Asynchronous Javascript And XML) 即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情 ...

  10. 力扣696(java)-计数二进制子串（简单）

    题目: 给定一个字符串 s,统计并返回具有相同数量 0 和 1 的非空(连续)子字符串的数量,并且这些子字符串中的所有 0 和所有 1 都是成组连续的. 重复出现(不同位置)的子串也要统计它们出现的次 ...