web前端 ajax加载动态生成复选框demo
2017-07-30 16:26
253 查看
<!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>
相关文章推荐
- 使用decj简化Web前端开发(一):声明式Javascript动态加载和浏览器事件绑定
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单续
- 当ajax加载更多的时候,动态生成的html里面的事件无法触发
- jsp/servlet使用ajax动态加载dtree, dtree样式/图片修改 (java 生成dtree servlet json)
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
- Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)
- Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)
- 前端webview,页面加载,发送Ajax请求,请求失败,https,http
- Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML
- web前端从Oracle数据库加载动态菜单所用到的数据表
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单?求助
- Ajaxload动态加载动画生成工具的实现(ajaxload的本地移植)
- jsp/servlet使用ajax动态加载dtree, dtree样式/图片修改 (java 生成dtree servlet json)
- 使用decj简化Web前端开发一:声明式Javascript动态加载和浏览器事件绑定
- 第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- HtmlUnit爬取Ajax动态生成的网页以及自动调用页面javascript函数
- web前端----ajax