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 相关文章推荐
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php文件上传你必须知道的几点
2015/10/20 PHP
JS event使用方法详解
2008/04/28 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
js style动态设置table高度
2014/10/21 Javascript
JavaScript函数详解
2014/11/17 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
简单上手Python中装饰器的使用
2015/07/12 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
pycharm显示远程图片的实现
2019/11/04 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
五一家具促销方案
2014/01/10 职场文书
工会文体活动总结
2015/05/07 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python