<!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. java事务（二）

    本地事务 事务类型 事务可以分为本地事务和分布式事务两种类型.这两种事务类型是根据访问并更新的数据资源的多少来进行区分的.本地事务是在单个数据源上进行数据的访问和更新,而分布式事务是跨越多个数据源来进 ...

  2. HBase数据存储

    HRegionServer  HBase的数据文件都存储在HDFS上,格式主要有两种: - HFile:HBase中KeyValue数据的存储格式,HFile是Hadoop的二进制文件,实际上Sto ...

  3. python3精简笔记(三)——高级特性

    Python中 1行代码能实现的功能,决不写5行代码.请始终牢记,代码越少,开发效率越高. 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片(Slice)操作符 L ...

  4. vscode+Firefox实现前端移动真机测试

    需要配件: 1.安装有火狐浏览器的移动端(手机); 2.安装有火狐浏览器和vscode的pc(电脑); 3.在vscode安装Live Server 插件 4.安装之后vscode右下角会有Go Li ...

  5. proc介绍及问题分析

    文件系统 基本介绍 proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为访问系统内核数据的操作提供接口.用户和应用程序可以通过proc得到系统的信息,并可以改变内 ...

  6. jquery.treetable.js

    html:   <table class="table table-hover table-responsive main-list" id="columntabl ...

  7. JAVA多线程----用--取钱问题1

    “生产者-消费者”模型,也就是生产者线程只负责生产,消费者线程只负责消费,在消费者发现无内容可消费时则睡觉.下面举一个比较实际的例子——生活费问题. 生 活费问题是这样的:学生每月都需要生活费,家长一 ...

  8. python 读取 xlsx

    >>> xl = pd.ExcelFile("dummydata.xlsx") >>> xl.sheet_names [u'Sheet1', u ...

  9. openresty 使用 log_by_lua 发送日志到 syslog-ng

    1. 安装   opm get p0pr0ck5/lua-resty-logger-socket   2. 使用    location   lua_by_lua_block    log_by_lu ...

  10. Cucumber 使用例子

    1. junit 配置 @RunWith(Cucumber.class) @CucumberOptions(format ={"pretty","html:target/ ...