您的位置：首页 > Web前端 > JavaScript

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

2017-08-08 08:24 686 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航