【Javascript】Js動態產生checkbox(使用Json資料)，checkboxjson

最後更新：2015-01-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More