当从下拉选择中选择某个选项时检查适当的复选框？

Question

fiddle

很抱歉问这个问题，我讨厌在这里问，我不想被视为吸血鬼，但我很坚持这个问题，我不认为我在正确的路线上所有，如果这根本没有意义，请发表评论，我会尝试解释。我很绝望！

基本上，我的工作要求您选择一家公司，当您这样做时，它会生成一些复选框。当您从下拉列表中选择配置文件时，它需要勾选相应的复选框。它应该勾选的复选框是该配置文件在其 PRIVILEGE_PROFILES.PRIVILEGE CODES 中的任何内容（这些是复选框）。

我的代码在这里 http://jsfiddle.net/shaunyweasel/dj8jr19e/5/ 。数组位于小提琴的顶部。我试图这样做，以便如果标签的文本值等于 SEC_PRIVILEGES.Name 然后勾选这些复选框，但这并没有真正起作用，所以我不确定是否有更好的方法来解决它.下面的方法是我一直在努力尝试让它勾选复选框，但我很确定它是错误的。

$(document).on('change', '#select_profile', function () {


var select = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

var checked = document.getElementsByTagName('input');

for (var i = 0; i < checked.length; i++) {
    if (checked[i].type == 'checkbox') {
        checked[i].checked = false;
    }
}

if (select !== 'None') {

    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === select) {
            selectedProfile = PRIVILEGE_PROFILES[i];
            privileges = selectedProfile.PRIVILEGE_CODE;
        }
    }


    for (var i = 0; i < SEC_Privileges.length; i++) {
        if (privileges[i] === SEC_Privileges[i].Unique_Code) {

            console.log(privileges);
            var labels = document.getElementsByTagName('label');
            var checked = document.getElementsByTagName('input');

            for (var c = 0; c < checked.length; c++) {
                if (SEC_Privileges[i].Name == labels) {
                    checked[c].checked = true;
                }
            }

        }

    }
}

  });

如果这没有意义，这里是它如何工作以及我在哪里卡住的一步一步：

1. 用户从 company_selection 下拉列表中选择一家公司

2. 选择公司后，它会根据其 COMPANY_PRIVILEGES.UNIQUE_CODE（数组）为该公司生成复选框

3. 然后用户必须从 profile_selection 中选择一些内容，并且根据他们选择的配置文件，它将检查相应的复选框，具体取决于它具有的 PRIVILEGE_PROFILES.PRIVILEGE_CODES。 （因此，如果您选择 Crew，那么它只会勾选 View Tyrell 框，因为这是它拥有的唯一配置文件）

Answer 1

你有什么理由不在你的代码中使用 jQuery 选择器吗？

无论如何，我已经进行了更新以解决您的问题（不使用 jQuery）http://jsfiddle.net/dj8jr19e/7/

主要问题是您没有为复选框设置任何 ID。 我已经设置了一个ID，对应于你的权限Unique_Code。

access.id = SEC_Privileges[i].Unique_Code;

然后，当您从所选配置文件中遍历相关权限时，我只是使用了 getElementById，因为 privileges 包含用作复选框 ID 的 Unique_Code。

Answer 2

下面是工作示例：DEMO

我更改了以下内容：

1）当您创建复选框时，我已将类名添加到类似于UNIQUE_CODE的复选框中

$(document).on('change', '#select_company', function () {

        // declare variables before the function
        var select = $("#select_company option:selected").text(),
            selectedProfile, privileges, div, label, access;

        // remove access checkboxes from previously selected profile
        $('.apps input[type=checkbox]').remove();
        $('.apps label').remove();

        // if the selected option is 'None', do nothing, else...
        if (select !== 'None') {

            // match the selected profile in the dropdown with the JS PROFILES object
            for (var i = 0; i < COMPANY_PRIVILEGES.length; i++) {
                if (COMPANY_PRIVILEGES[i].COMPANY_CODE === select) {
                    selectedProfile = COMPANY_PRIVILEGES[i];
                    privileges = selectedProfile.UNIQUE_CODE;
                }
            }
            // match the associated privileges from the profile within the entire privilege list
            for (var j = 0; j < privileges.length; j++) {
                for (var i = 0; i < SEC_Privileges.length; i++) {
                    if (privileges[j] === SEC_Privileges[i].Unique_Code) {
                        // get the div with the id === SEC_Privileges[i].Group_code
                        div = document.getElementById(SEC_Privileges[i].Group_Code);
                        access = document.createElement('input');
                        access.type = 'checkbox';
                        access.className  = SEC_Privileges[i].Unique_Code;
                        label = document.createElement('label');
                        // create a textnode with the unique code from the privileges
                        label.appendChild(document.createTextNode(SEC_Privileges[i].Name));
                        div.appendChild(label);
                        div.appendChild(access);

                    }
                }
            }
        }
    });

2) 编写简单的函数来检查基于类名的复选框：

$(document).on('change', '#select_profile', function () {
    var selectedValue = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

    console.log(selectedValue);
    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === selectedValue) {
            privileges = PRIVILEGE_PROFILES[i].PRIVILEGE_CODE;
        }
    }
    for(var j = 0; j < privileges.length; j++) {
     $('.'+privileges[j]).attr("checked", "true");   
    }


});