Js动态生成checkbox(使用Json数据)

最新推荐文章于 2022-02-17 23:01:15 发布

东边的小山

最新推荐文章于 2022-02-17 23:01:15 发布

阅读量5k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

92 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据Json动态生成checkbox</title>
<style type="text/css">
body {
margin: 0 auto;
}
#show {
margin: 10px auto;
width: 450px;
font-size: 14px;
}
.content {
float: left;
width: 450px;
margin: 10px 0px 20px 10px;
}
.bigfont {
font-size: 14px;
}
.la {
float: left;
width: 50px;
height: 20px;
margin: 5px 0;
line-height: 20px;
}
.la input {
float: left;
}
.la span {
float: left;
line-height: 20px;
}
</style>
<script type="text/javascript" src="../../libs/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var years = ["2013", "2014"];
var months = {
"2013": [12, 11, 10, 9, 8, 7],
"2014": [6, 5, 4, 3, 2, 1]
};
var yearMonth = [years, months];
genCheck(yearMonth);
}
function genCheck(yearMonth) {
var content = "content";
var checkText = "checkbox";
var link = "link";
var size;
$("#show").html("");
var years = yearMonth[0];
size = years.length;
for (var i = 0; i < years.length; i++) {
genShowContent("show", checkText + i, i, years[i] + "年", content + i);
}
var monthObj = yearMonth[1];
for (var i = 0; i < years.length; i++) {
var array = monthObj["" + years[i] + ""];
for (var j = 0; j < array.length; j++) {
genCheckBox(content + i, link + i, array[j], array[j] + "月", i, false);
}
var flag = isAllCheck(link + i);
var box = document.getElementById(checkText + i);
if (flag) {
box.checked = true;
} else {
box.checked = false;
}
$("input[name=" + link + i + "]").each(function () {
$(this).unbind();
$(this).change(function () {
var flag = isAllCheck($(this).attr("name"));
var box = document.getElementById(checkText + $(this).attr("parentIndex"));
if (flag) {
box.checked = true;
} else {
box.checked = false;
}
});
});
}
for (var i = 0; i < size; i++) {
$("#" + checkText + i).unbind();
$("#" + checkText + i).change(function () {
var temp = link + $(this).attr("index");
var p = document.getElementById(checkText + $(this).attr("index"));
var box = document.getElementsByName(temp);
for (var j = 0; j < box.length; j++) {
if (p.checked) {
box[j].checked = true;
} else {
box[j].checked = false;
}
}
});
}
}
function genCheckBox(id, name, value, showText, parentIndex, isCheck) {
if (!isCheck) {
var checkbox = "<div class='la'><input type='checkbox' parentIndex=" + parentIndex + " name=".concat(name).concat(" value=").concat(value).concat(" alt=").concat(showText).concat(" /><span>").concat(showText).concat("</span></div>");
$("#" + id).append(checkbox);
} else {
var checkbox = "<div class='la'><input type='checkbox' parentIndex=" + parentIndex + " name=".concat(name).concat(" checked='checked' value=").concat(value).concat(" alt=").concat(showText).concat(" /><span>").concat(showText).concat("</span></div>");
$("#" + id).append(checkbox);
}
}
function genShowContent(id, checkboxId, index, showText, idName) {
var showContent = "<div class='msg'><span class='bigfont'>".concat(showText).concat("： </span><input type='checkbox' index=").concat(index).concat(" id='").concat(checkboxId).concat("'/><span>全选</span><div class='content' id='").concat(idName).concat("' ></div></div>");
$("#" + id).append(showContent);
}
function isAllCheck(name) {
var box = document.getElementsByName(name);
for (var j = 0; j < box.length; j++) {
if (!box[j].checked) {
return false;
}
}
return true;
}
</script>
</head>
<body>
<div class="show" id="show"></div>
</body>
</html>
演示地址：http://zhangjikai.com/demo/html/checkbox.html

东边的小山

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。