<!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. == 和 equals 的用法

    在java中,boolean.byte.short.int.long.char.float.double这八种是基本数据类型,其余都是引用类型. “==”是比较两个变量的值是否相等, “equals” ...

  2. 常见Git操作及关键知识点

    一.Git三区概念 工作区 (work dict) 暂存区(stage)(add 是添加到当前的暂存区) 提交区(就是当前工作的分支master分支或者branches分支) git 所有操作都是基于 ...

  3. SQL基础四（例子）

    ------------------------------------------------ --分别创建student/course/score表 Create table student ( ...

  4. angular使用遇到的问题

    http://www.angularjs.cn/A0a6 用路由的时候,在js里写jquery的事件dom操作失效,只有在子页面里嵌套js才生效(jquery也不行).解决办法就是把dom操作用ng- ...

  5. [IC]Lithograph(2)光刻技术的分辨率与分辨率增强技术

    接上一篇介绍IC制造的基本过程,光刻的基本过程.这篇文章继续介绍光刻过程中的一些概念. 该系列文章的目录如下: [IC]Lithograph(0)半导体制造的基本过程 [IC]Lithograph(1 ...

  6. iOS开发错误汇总

    人非圣贤孰能无过 dyld: Library not loaded: /... 过而能改善莫大焉 iOS下dyld: Library not loaded: 错误信息解决方案

  7. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. AngularX Http服务总结

    自己经常用的方式: 1.首先看httpModule Angular2的http访问经常采用两种方式: 共同点:导入相应的Module import {Http, RequestOptions, Res ...

  9. LeetCode Friend Circles

    原题链接在这里:https://leetcode.com/problems/friend-circles/description/ 题目: There are N students in a clas ...

  10. elixir jenkins 集成构建方式配置

    备注:    主要问题是环境变量配置的问题,解决方法是使用软连接进行解决   1. 下载软件包 wget https://github.com/elixir-lang/elixir/releases/ ...