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

浏览数：26 / 时间：2015年06月08日

<!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.tk/demo/html/checkbox.html

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。