您的位置：首页 > Web前端

web前端 ajax加载动态生成复选框demo

2017-07-30 16:26 246 查看 
<!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>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航