JS 实现弹出式复选框

素直的纯白 2013-07-17 05:07:56
小弟想做一个弹出式的复选框，就是从一个输入框，点击在下面出现一些复选框，选择之后点击确定将选择的内容返回到输入框里。再次点击可以将输入框中已经选择的内容返回给复选框中，实现可以修改选择的功能。研究了大半天。网上许多例子都看过了，由于几乎不会JS。。 勉强看的懂但是不会改成我想要的样子。。 求前辈指引。。
...全文
1023 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
_harding 2013-10-18
  • 打赏
  • 举报
 回复
引用 12 楼 czw2010 的回复:
使用bootstarp框架吧，挺简单的


怎么用bootstrap做出来大侠能简单说下嘛？

我只能参照13楼做出来这样
_harding 2013-10-18
  • 打赏
  • 举报
 回复
引用 13 楼 bree06 的回复:
自己写了一个，ie6,chrome测试过，测试前请导入jquery 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style type="text/css">
	.container {position:absolute; display:none; padding-left:10px;}
	.shadow {float:left;}
	.frame {position:relative; background:#fff; padding:6px; display:block;
		-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
	}
	.clear {clear:left;}
	label,a {font-size:13px;color:#4f6b72;}
	#language {font-size:13px;color:#4f6b72;border:1px solid #4f6b72;height:20px;}
	div.frame div {margin-bottom:5px;}
	div.frame div.foot {margin-top:10px;}
	div.frame label {margin: 0 10px 0 5px;}
	div.frame a:link,div.frame span a:visited {
		text-decoration:none;
	}
</style>
<!--[if IE]>
<style type="text/css">
	.container {padding-left:14px;}
	.frame {left:4px; top:4px;}
	.shadow {background:#000; margin:-2px 0px 0px 0px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
</style>
<![endif]-->

<script language="javascript" src="jquery.js"></script>
</head>

<body>

<!--http://bbs.csdn.net/topics/390520923 -->

<label for="language">选择城市：</label><input type="text" id="language"/>
<div class="container">
	<div class="shadow">
		<div class="frame">
			<div><input type="checkbox" id="location0"/><label for="location0">北京</label></div>
			<div><input type="checkbox" id="location1"/><label for="location1">上海</label></div>
			<div><input type="checkbox" id="location2"/><label for="location2">广州</label></div>
			<div><input type="checkbox" id="location3"/><label for="location3">深圳</label></div>
			<div><input type="checkbox" id="location4"/><label for="location4">南京</label></div>
			<div><input type="checkbox" id="location5"/><label for="location5">天津</label></div>
			<div class="foot"><a href="#" id="submit">确定</a></div>
		</div>
	</div>
</div>
<script language="javascript">
	$('#language').bind('focus', function() {
		var offset = $(this).offset(), container = $('div.container');
		container.css({top:offset.top+Number($(this).css('height').replace('px', '')), left:offset.left}).show(100);
	});
	$(document).bind('click', function(){
		var targ;
		if (event.target) targ = event.target
		else if (event.srcElement) targ = event.srcElement
		if (targ.nodeType == 3) // defeat Safari bug
			targ = targ.parentNode;
		if (targ.id !='language' && !$(targ).parents('div.container').attr('class'))
			$('div.container').hide(100);
	});
	$('#submit').bind('click', function(){
		var vals = '', length;
		$('div.frame input[type=checkbox]:checked').each(function(){
			vals += ($(this).next().text() + ';');
		});
		if ((length = vals.length) > 0) vals = vals.substr(0, length -1);
		$('#language').val(vals);
		$('div.container').hide(100);
	});
</script>
</body>
</html>
帅哥你冒泡函数忘记传event进去
_harding 2013-10-17
  • 打赏
  • 举报
 回复
引用 12 楼 czw2010 的回复:
使用bootstarp框架吧，挺简单的
用bootstrap？能指点一二否？
iavlww 2013-07-19
  • 打赏
  • 举报
 回复
顶楼上，很不错哦，拿走了.
宇宙浪子 2013-07-18
  • 打赏
  • 举报
 回复
引用 10 楼 aa24866139 的回复:
http://www.phptogether.com/juidoc/index.htm

那个。。 我使用的内网不允许打开那个网址。。 能帮个忙贴一个粗来不。。[/quote]


这个网址可以下载easyUI api的chm版本http://download.csdn.net/detail/miklechun/5775633

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic Combo - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Basic Combo</h2>

    <div class="demo-info" style="margin-bottom:10px">

        <div class="demo-tip icon-tip"></div>

        <div>Click the right arrow button to show drop down panel that can be filled with any content.</div>

    </div>

    <select id="cc" style="width:150px"></select>

    <div id="sp">

        <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>

        <input type="radio" name="lang" value="01"><span>Java</span><br/>

        <input type="radio" name="lang" value="02"><span>C#</span><br/>

        <input type="radio" name="lang" value="03"><span>Ruby</span><br/>

        <input type="radio" name="lang" value="04"><span>Basic</span><br/>

        <input type="radio" name="lang" value="05"><span>Fortran</span>

    </div>

    <script type="text/javascript">

        $(function(){

            $('#cc').combo({

                required:true,

                editable:false

            });

            $('#sp').appendTo($('#cc').combo('panel'));

            $('#sp input').click(function(){

                var v = $(this).val();

                var s = $(this).next('span').text();

                $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');

            });

        });

    </script>

</body>

</html>

这个功能是


以下的案例是多选的：（ComboBox的效果）
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Multiple Select - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Load Dynamic ComboBox Data</h2>

    <div class="demo-info" style="margin-bottom:10px">

        <div class="demo-tip icon-tip"></div>

        <div>Drop down the panel and select multiple items.</div>

    </div>

    <input class="easyui-combobox" 

            name="language"

            data-options="

                    url:'../combobox/combobox_data1.json',

                    valueField:'id',

                    textField:'text',

                    multiple:true,

                    panelHeight:'auto'

            ">

 

</body>

</html>

出来的效果是

其他的api里面都有的，自己看看吧，一个是
素直的纯白 2013-07-18
  • 打赏
  • 举报
 回复
引用 9 楼 Miklechun 的回复:
easy UI都有插件可以实现的，可以查下api。 http://www.phptogether.com/juidoc/index.htm
那个。。 我使用的内网不允许打开那个网址。。 能帮个忙贴一个粗来不。。
宇宙浪子 2013-07-18
  • 打赏
  • 举报
 回复
easy UI都有插件可以实现的，可以查下api。 http://www.phptogether.com/juidoc/index.htm
wyx100 2013-07-18
  • 打赏
  • 举报
 回复
能单选就能改成复选的呀！
效林少爷 2013-07-18
  • 打赏
  • 举报
 回复
引用 6 楼 aa24866139 的回复:
[quote=引用 5 楼 longtian1213 的回复:] [quote=引用 3 楼 aa24866139 的回复:] [quote=引用 2 楼 longtian1213 的回复:] esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。[/quote]、 额，没关系的呀！能单选就能改成复选的呀！[/quote]
引用 5 楼 longtian1213 的回复:
[quote=引用 3 楼 aa24866139 的回复:] [quote=引用 2 楼 longtian1213 的回复:] esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。[/quote]、 额，没关系的呀！能单选就能改成复选的呀！[/quote] 指点一下呗。。[/quote] 学习下啊
素直的纯白 2013-07-18
  • 打赏
  • 举报
 回复
引用 5 楼 longtian1213 的回复:
[quote=引用 3 楼 aa24866139 的回复:] [quote=引用 2 楼 longtian1213 的回复:] esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。[/quote]、 额，没关系的呀！能单选就能改成复选的呀！[/quote]
引用 5 楼 longtian1213 的回复:
[quote=引用 3 楼 aa24866139 的回复:] [quote=引用 2 楼 longtian1213 的回复:] esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。[/quote]、 额，没关系的呀！能单选就能改成复选的呀！[/quote] 指点一下呗。。
S117 2013-07-18
  • 打赏
  • 举报
 回复
引用 3 楼 aa24866139 的回复:
[quote=引用 2 楼 longtian1213 的回复:] esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。[/quote]、 额，没关系的呀！能单选就能改成复选的呀！
素直的纯白 2013-07-18
  • 打赏
  • 举报
 回复
引用 1 楼 caofeng891102 的回复:
学习。
共同学习呗~
素直的纯白 2013-07-18
  • 打赏
  • 举报
 回复
引用 2 楼 longtian1213 的回复:
esayui 演示范例-->表单相关-->下拉选择框
话说这个要是有是复选框的就好了啊。。。
bree06 2013-07-18
  • 打赏
  • 举报
 回复

自己写了一个，ie6,chrome测试过，测试前请导入jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

	<title>Untitled</title>

<style type="text/css">

	.container {position:absolute; display:none; padding-left:10px;}

	.shadow {float:left;}

	.frame {position:relative; background:#fff; padding:6px; display:block;

		-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

		-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

	}

	.clear {clear:left;}

	label,a {font-size:13px;color:#4f6b72;}

	#language {font-size:13px;color:#4f6b72;border:1px solid #4f6b72;height:20px;}

	div.frame div {margin-bottom:5px;}

	div.frame div.foot {margin-top:10px;}

	div.frame label {margin: 0 10px 0 5px;}

	div.frame a:link,div.frame span a:visited {

		text-decoration:none;

	}

</style>

<!--[if IE]>

<style type="text/css">

	.container {padding-left:14px;}

	.frame {left:4px; top:4px;}

	.shadow {background:#000; margin:-2px 0px 0px 0px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}

</style>

<![endif]-->



<script language="javascript" src="jquery.js"></script>

</head>



<body>



<!--http://bbs.csdn.net/topics/390520923 -->



<label for="language">选择城市：</label><input type="text" id="language"/>

<div class="container">

	<div class="shadow">

		<div class="frame">

			<div><input type="checkbox" id="location0"/><label for="location0">北京</label></div>

			<div><input type="checkbox" id="location1"/><label for="location1">上海</label></div>

			<div><input type="checkbox" id="location2"/><label for="location2">广州</label></div>

			<div><input type="checkbox" id="location3"/><label for="location3">深圳</label></div>

			<div><input type="checkbox" id="location4"/><label for="location4">南京</label></div>

			<div><input type="checkbox" id="location5"/><label for="location5">天津</label></div>

			<div class="foot"><a href="#" id="submit">确定</a></div>

		</div>

	</div>

</div>

<script language="javascript">

	$('#language').bind('focus', function() {

		var offset = $(this).offset(), container = $('div.container');

		container.css({top:offset.top+Number($(this).css('height').replace('px', '')), left:offset.left}).show(100);

	});

	$(document).bind('click', function(){

		var targ;

		if (event.target) targ = event.target

		else if (event.srcElement) targ = event.srcElement

		if (targ.nodeType == 3) // defeat Safari bug

			targ = targ.parentNode;

		if (targ.id !='language' && !$(targ).parents('div.container').attr('class'))

			$('div.container').hide(100);

	});

	$('#submit').bind('click', function(){

		var vals = '', length;

		$('div.frame input[type=checkbox]:checked').each(function(){

			vals += ($(this).next().text() + ';');

		});

		if ((length = vals.length) > 0) vals = vals.substr(0, length -1);

		$('#language').val(vals);

		$('div.container').hide(100);

	});

</script>

</body>

</html>
夜之子 2013-07-18
  • 打赏
  • 举报
 回复
使用bootstarp框架吧，挺简单的
caofeng891102 2013-07-17
  • 打赏
  • 举报
 回复
学习。
Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip
Javascript 弹出式复选框 (JQuery 插件 mulitselector).zip
程序天下:JavaScript实例自学手册
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
主流前端框架下ArcGIS API for JavaScript的开发
课程主要包括在React和Vue中ArcGIS API for JavaScript的使用和ArcGIS API for JavaScript的几个通用地图功能点的开发介绍，主要向大家讲解ArcGIS JS API的开发方法，引导大家学会ArcGIS JS API的开发。课程最后...
《程序天下：JavaScript实例自学手册》光盘源码
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
精通JS脚本之ExtJS框架.part2.rar
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
Web 开发

81,094

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章