js点击文本框弹出可选择checkbox
来源:互联网 发布:网络交友弊大于利论点 编辑:程序博客网 时间:2024/06/06 00:29
<!DOCTYPE html><html><head><meta charset="gb2312"><script type="text/javascript" src="jquery-1.8.3.js"></script><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"> $(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>
阅读全文
0 0
- js点击文本框弹出可选择checkbox
- JS实现点击文本框弹出DIV层
- js 点击文本框后弹出选择日期
- js 点击文本框后弹出选择日期
- 点击文本框弹出日期
- 点击文本框弹出日期
- 点击按钮弹出文本框
- JS如何实现点击文本框弹出DIV层
- 文本框js日历弹出
- 点击文本框弹出热门标签
- 基于js的一个日历控件,点击按钮,弹出日历,显示日期到文本框
- 【JS】点击弹出DIV
- android 点击文本框弹出日期对话框
- android webview 点击文本框弹出数字键盘
- android DatePicker 点击文本框,禁止弹出键盘
- ztree 点击文本框弹出下拉框
- 鼠标点击 文本框 消失 js
- js鼠标点击变文本框
- JUnit 单元测试报错 initializationerror [Runner:JUnit 4]
- 范式判定及修改
- IntelliJ IDEA mac下激活
- 网络基本功(二):细说交换机
- 数据库编码查看及配置方式
- js点击文本框弹出可选择checkbox
- 线性表存储方法
- 第七周 项目3
- python set集合(数据结构)
- 10.15周日
- 2017.10.15 第六、七、八天总结
- 1034. 有理数四则运算(20)
- 表示数值的字符串
- hive 的map数和reduce如何确定