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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php使用GeoIP库实例
2014/06/27 PHP
php去掉文件前几行的方法
2015/07/29 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python文字转语音的实例代码分析
2019/11/12 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
大学生自我鉴定书
2014/03/24 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
殡葬服务心得体会
2014/09/11 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
打架检讨书范文
2015/01/27 职场文书
教师工作表现自我评价
2015/03/05 职场文书
放假通知范文
2015/04/14 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL