<!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. Skynet服务器框架（九） snax框架

    什么是 snax 由于 skynet 的 API 还是比较偏底层,为简化服务的编写提供一套简单的 API ,便有了这套 snax 框架,解决的问题: "编写一个 skynet 内部服务,处理 ...

  2. 求二叉树的深度 python

    二叉树有深度和高度两个属性,一个节点的深度指的是从根节点到该节点路径的长度,根节点的深度为1:一个节点的高度指的是从该节点到叶子节点所有路径上包含节点个数的最大值.叶子节点的高度为1,往上节点的高度依 ...

  3. maven搭建ssm框架是使用最新mysql 6.0jar遇到的问题

    作者:blouc@qq.com本文为作者原创,转载请注明出处:https://www.cnblogs.com/oucbl/p/5940556.html 今天学习SSM框架整合,完成Spring和myb ...

  4. 剑指offer第三章

    剑指offer第三章 1.数值的整数次方 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. class Solution { public ...

  5. 动态添加 items to PopupMenu

    引用自http://stackoverflow.com/questions/10175140/adding-items-to-popupmenu DevExpress.XtraBars.BarMana ...

  6. python调用rpc实现分布式系统

    rpc 一般俗称,远程过程调用,把本地的函数,放到远端去调用. 通常我们调用一个方法,譬如: sumadd(10, 20),sumadd方法的具体实现要么是用户自己定义,要么存在于该语言的库函数中,也 ...

  7. drill 数据库查询方式简单说明

    1. mysql   select * from mysql-storage.mysqldb.mysqltable   2. oracle    select * from oracle-storag ...

  8. 几个开源ssg 技术方案

    1. Nanoc    2. Middle Man App   3. Hexo   4. DocPad   5. Hugo   6. Jekyll   7. Octopress   8. Harp   ...

  9. Linux环境下搭建Git仓库

    1.安装Git $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel $ yum ...

  10. POJ2503：Babelfish

    浅谈\(Trie\):https://www.cnblogs.com/AKMer/p/10444829.html 题目传送门:http://poj.org/problem?id=2503 \(Trie ...