<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>1</title>

	</head>

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

	<style>

		body {

			font-family: Arial, Helvetica, sans-serif;

			font-size: 12px;

			margin: 0;

		}

		#main {

			height: 1800px;

			padding-top: 90px;

			text-align: center;

		}

		#fullbg {

			background-color: gray;

			left: 0;

			opacity: 0.5;

			position: absolute;

			top: 0;

			z-index: 3;

			filter: alpha(opacity=50);

			-moz-opacity: 0.5;

			-khtml-opacity: 0.5;

		}

		#dialog {

			background-color: #fff;

			border: 5px solid rgba(0, 0, 0, 0.4);

			height: 400px;

			left: 50%;

			margin: -200px 0 0 -200px;

			padding: 1px;

			position: fixed !important;

			/* 浮动对话框 */

			position: absolute;

			top: 50%;

			width: 400px;

			z-index: 5;

			border-radius: 5px;

			display: none;

		}

		#dialog p {

			margin: 0 0 12px;

			height: 24px;

			line-height: 24px;

			background: #CCCCCC;

		}

		#dialog p.close {

			text-align: right;

			padding-right: 10px;

		}

		#dialog p.close a {

			color: #fff;

			text-decoration: none;

		}

	</style>

	<script type="text/javascript">

		//显示灰色 jQuery 遮罩层

		function showBg() {

			var bh = $("body").height();

			var bw = $("body").width();

			$("#fullbg").css({

				height: bh,

				width: bw,

				display: "block"

			});

			$("#dialog").show();

			 $.post("${ctx}/shwindow/",function (data) {

			$.each(data, function (i, item) {

			$("#CityObjectcb").append(

				"<label>"

                    +"<input name='items' type='checkbox' value="+"item.cityName" +">"+

                      "item.cityName"+

                    "</label>");

                    });

                  })

		}

		//关闭灰色 jQuery 遮罩

		function closeBg() {

			$("#fullbg,#dialog").hide();

		}

	</script>

<script type="text/javascript">

	function selectAll(){

    if ($("#SelectAll").attr("checked")) {

        $(":checkbox").attr("checked", true);

    } else {

        $(":checkbox").attr("checked", false);

    }

}

</script>

<script type="text/javascript">

        $(function () {

            //1，全选

            $("#checkedAll").click(function () {

                $("[name=items]:checkbox").attr('checked', true);

            });

            //2，全不选

            $("#checkedNo").click(function () {

                $("[name=items]:checkbox").attr('checked', false);

            });

            //3，反选

            $("#checkedRev").click(function () {

                $("[name=items]:checkbox").each(function () {

                    //$(this).attr('checked', !$(this).attr('checked'));    //方式一

                    this.checked = !this.checked;               //方式二

                });

            });

            //5,提交选中的值

            $("#send").click(function () {

                var str = "选中的项是：\n\r";

                $("[name=items]:checkbox:checked").each(function () {

                    str += $(this).val() + '\n\r';

                });

                alert(str);

            });

        });

    </script>

	<body>

		<div id="main">

			<input type="button" value="CNZZ智能推荐" onclick="showBg()"/>

			<div id="fullbg"></div>

			<div id="dialog">

				<p class="close">

					<a href="#" onclick="closeBg();">关闭</a>

				</p>

				<div> <div>选择城市：</div>

				<div id="CityObjectcb"></div>

<!--<label><input name="items" type="checkbox" value="厦门" />厦门</label><br />

<label><input name="items" type="checkbox" value="福州" />福州</label><br />

<label><input name="items" type="checkbox" value="龙岩" />龙岩</label><br />

<label><input name="items" type="checkbox" value="杭州" />杭州</label><br />-->

<input type="button" id="checkedAll" value="全选" />

<input type="button" id="checkedNo" value="全不选" />

<input type="button" id="checkedRev" value="反选" />

<input type="button" id="send" value="提交选中的值" />

				</div>

			</div>

		</div>

	</body>

</html>

　　

web前端 ajax加载动态生成复选框demo的更多相关文章

  1. ExtJs动态生成复选框

    var old_value = Ext.get("fgzr_select").getValue() if(old_value == ""){ document. ...

  2. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  3. 复选框demo

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  4. ajax动态添加复选框

    function getLands() { $.ajax({ url:"httpserver.do?doPost&userQygs="+$("#userQygs& ...

  5. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值

    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  6. web前端图片加载优化，从图片模糊到清晰的实现过程

    在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐? 默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我 ...

  7. web项目页面加载时，下拉框有值

    1.我用的框架是springmvc和mybaitis 由于没有整个项目,直接就去请求的action  :http://localhost:8080/ytert/test/selectStoreType ...

  8. easyui_tree 复选框 动态加载树

    controller动态获取单位用户树 #region 下拉树菜单 /// <summary> /// 获取工作人员树菜单 /// </summary> /// <par ...

  9. Python爬虫-05：Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

随机推荐

  1. C++实现线程同步的几种方式

    线程同步是指同一进程中的多个线程互相协调工作从而达到一致性.之所以需要线程同步,是因为多个线程同时对一个数据对象进行修改操作时,可能会对数据造成破坏,下面是多个线程同时修改同一数据造成破坏的例子: # ...

  2. Faster R-CNN改进篇（一）： ION ● HyperNet ● MS CNN

    一. 源起于Faster 深度学习于目标检测的里程碑成果,来自于这篇论文: Ren, Shaoqing, et al. "Faster R-CNN: Towards real-time ob ...

  3. java入门学习（3）—循环，选择，基础算法，API概念

    1.顺序结构:也就是顺着程序的前后关系,依次执行.2.选择分支:利用if..else , / switch(){case [ 这个必须是常量]:}; / if..else if….. ….else.. ...

  4. dyld: lazy symbol binding failed: Symbol not found: ___sincosf_stret

    This is the error I get: dyld: lazy symbol binding failed: Symbol not found: ___sincosf_stret Refere ...

  5. 安装redis-3.2.10单节点

    前段时间安装好的redis,今天用脚本安装的时候突然出现版本异常的问题,所以更新一篇为大家提供参考 本次安装在CentOS6.5,采用的redis-3.2.10,最新的redis-4.0.1安装同样适 ...

  6. caffe配置

    2016年最开心的事哈哈哈. 基本参照它. http://www.linuxdiyf.com/linux/12708.html 有时间在稍微写点. linux下:(装上GPU之后,在bois貌似禁止了 ...

  7. 类的静态方法@staticmethod

    静态方法 @staticmethod 静态方法是定义在类内部的函数,此函数的作用域是类的内部 说明: 静态方法需要使用 @staticmethod装饰器定义 静态方法与普通函数定义相同,不需要传入se ...

  8. my_itoa

    #include <iostream> using namespace std; char *my_reverse(char* s) { char *p,*q; p=s;q=s; whil ...

  9. linux自学（五）之开始centos学习，Xshell远程连接

    上一篇:linux自学(四)之开始centos学习,网络配置 前面操作都是在电脑中的虚拟机上操作的,比较麻烦,需要来回切换.下面我将使用远程连接工具Xshell进行操作,Xshell直接百度下载即可. ...

  10. 每天一个linux命令（文件操作）：【转载】find命令之exec

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...