<!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>