js点击文本框弹出可选择的checkbox复选框


Posted in Javascript onFebruary 03, 2016

本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展。
代码如下:

<html>
<head>
<meta charset="gb2312">
<title>js点击文本框弹出可选择的checkbox复选框</title>
<style type="text/css">
#div{
 margin-bottom:10px;
 position:relative;
}
#div1{
 width:153px;
 padding-top:0px;
 padding-left:0px;
 position:absolute;
}
#div1 ul{
 margin-top:0px;
 padding-left:0px;
 background-color:#ccc;
 list-style:none;
}
#div1 ul li{
 padding-left:0px;
}
#div1 ul li input{
 margin-left:15px;
}
.close{
 display:none;
}
.open{
 display:block;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 var position=$("#xx").offset(); 
 $("#div1").offset({ 
  top:position.top+22,
  left:position.left
 }); 
 $("#xx").click(function(){ 
  $("#NG").toggleClass("open"); 
 });
 $("#div1 input[name=ng]").click(function(){ 
  var arr=new Array(); 
  $("input[name=ng]:checked").each(function(key,value){
   arr[key]=$(value).val();
  }); 
  $("#xx").val(arr.join(",")); 
 }) 
}) 
</script>
</head>
<body>
<div id="div">
 <div align="center" id="div2" >
  <form id="form1">
   <input type="text" readonly="readonly" id="xx"/>
   <input type="submit" value="查询"/>
  </form>
 </div>
 <div id="div1">
  <ul class="close" id="NG" >
   <li><input type="checkbox" name="ng" value=1 />1</li>
   <li><input type="checkbox" name="ng" value=2 />2</li>
   <li><input type="checkbox" name="ng" value=3 />3</li>
  </ul>
 </div>
</div>
</body>
</html>

以上代码实现了我们的要求,下面介绍一下它的实现过程。
代码注释:
1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.var position=$("#xx").offset(),获取文本框相对于document文档的偏移量,offset()函数返回的是一个对象,此对象包含两个属性left和top,分别表示相对于文档的水平和垂直偏移量。
3.$("#div1").offset({top:position.top+22,left:position.left}),设置弹出下拉菜单容器的相对文档的偏移量,第一个加22是为了使其在文本框的下面显示。
4.$("#xx").click(function(){$("#NG").toggleClass("open");}),为文本框注册click事件处理函数,点击它可以切换样式类open删除和添加,也就是设置下拉菜单的显示和隐藏。
5.$("#div1 input[name=ng]").click(function(){ }),为name属性值为ng的文本框注册click事件处理函数。
6.var arr=new Array(),创建一个数组,用来存放选中checkbox复选框的value值。
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),将选中的复选框的值存入数组。
8.$("#xx").val(arr.join(","));,将数组元素连接成字符串写入文本框。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
AngularJS实现Model缓存的方式
Feb 03 #Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 #Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 #Javascript
简单实现js选项卡切换效果
Feb 03 #Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 #Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 #Javascript
javascript自定义滚动条实现代码
Apr 20 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php简单的会话类代码
2011/08/08 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python 列表list使用介绍
2014/11/30 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
django queryset相加和筛选教程
2020/05/18 Python
python不同系统中打开方法
2020/06/23 Python
python 实现aes256加密
2020/11/27 Python
历史系毕业生自荐信
2013/10/28 职场文书
魅力教师事迹材料
2014/01/10 职场文书
食品采购员岗位职责
2014/04/14 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
英语教师求职信
2014/06/16 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
考试没考好检讨书
2015/05/06 职场文书
分家协议书范本
2016/03/22 职场文书