<!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. keras模型可视化及解决'Failed to import pydot'问题

    1．keras模型可视化 keras.utils.vis_utils模块提供了画出Keras模型的函数(利用graphviz) 该函数将画出模型结构图,并保存成图片: from keras.utils ...

  2. mongodb 使用

    一.下载 MongoDB的官网是:http://www.mongodb.org/ MongoDB最新版本下载在官网的DownLoad菜单下:http://www.mongodb.org/downloa ...

  3. 【剑指offer】二叉树的子结构，C++实现（递归）

    原创博文,转载请注明出处! <牛客链接> 1.题目 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:约定空树不是任意一个树的子结构) 图1.二叉树A和二叉树B 2.思路(递归)    ...

  4. 【数据处理】OneHotEncoder编码

    原创博文,转载请注明出处! # OneHotEncoder编码      OneHotEncoder编码称为"哑编码"或"独热编码",是将表示分类的数据扩维度, ...

  5. HDU2181 哈密顿绕行世界问题

    解题思路:哈密顿环游世界问题.一道简单的题目,用回溯. #include<cstdio> #include<cstring> #include<algorithm> ...

  6. BZOJ - 3295 动态逆序对 (树状数组套treap)

    题目链接 思路和bzoj2141差不多,不过这道题的数据更强一些,线段树套treapT了,树状数组套treap卡过~~ #include<bits/stdc++.h> using name ...

  7. BZOJ1059 ZJOI2007 矩阵游戏 【二分图匹配】

    BZOJ1059 ZJOI2007 矩阵游戏 Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一 ...

  8. hadoop2.x常用端口、定义方法及默认端口、hadoop1.X端口对比

    问题导读: 1.DataNode的http服务的端口.ipc服务的端口分别是哪个? 2.NameNode的http服务的端口.ipc服务的端口分别是哪个? 3.journalnode的http服务的端 ...

  9. flask第十七篇——模板【1】

    从这一节开始我们就正式进入flask一个重要的模块——模板了. 我们平时看的知乎平台就是Python开发的,可以看到他的很多页面布局都是一样的,比如你现在搜“如何自学Python”,去知乎看他的页面是 ...

  10. PEP

    用python ,  PEP难以绕过.  PEP是什么?   Python Enhancement Proposals , 它集合了python的改进提案. 它不是版本递进的, 有些PEP是应该去读一 ...