- <!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
Js动态生成checkbox(使用Json数据)
最新推荐文章于 2022-02-17 23:01:15 发布