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 Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JQuery工具函数汇总
Jun 15 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
基于vue实现分页效果
2017/11/06 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
促销活动方案模板
2014/02/24 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
工作经历证明书范文
2014/11/02 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers