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

来源：互联网发布：淘宝欠款多少会被起诉编辑：程序博客网时间：2024/06/18 13:39
<!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 0