JavaScript 数组不起作用，直接输入有效答案

【问题标题】：JavaScript Array does not work, direct input worksJavaScript 数组不起作用，直接输入有效
【发布时间】：2017-05-04 07:06:03
【问题描述】：

我有一个数组，其中的值代表我网站上的复选框。如果单击复选框，我想让相应复选框的标签变为蓝色。

我有一个有效的点击功能，它工作得很好，但前提是我直接使用复选框名称（这里是复选框名称haustiere_erlaubt：

        $('#haustiere_erlaubt').click(function(){
            if(document.getElementById("haustiere_erlaubt").checked) {
                $("label[for=haustiere_erlaubt]").css("color", "#0d9eff");
            } else {
                $("label[for=haustiere_erlaubt]").css("color", "#b4b4b4");
            }
        });

我的网站上有多个复选框，使用数组更有效，因为我不想多次写下相同的代码。但不知何故，即使 consol.log 向我显示了正确的复选框名称，它也不起作用：

var bool_checkboxes = ["haustiere_erlaubt", "bettwaesche_wird_gestellt", "grill_vorhanden", "safe_vorhanden", "kuehlschrank_vorhanden", "rauchen_erlaubt", "parkplatz_vorhanden",
                           "kochmoeglichkeit_vorhanden", "restaurant_im_haus_vorhanden", "handtuecher_werden_gestellt", "tv_vorhanden", "waschmoeglichkeit_vorhanden", "wlan_vorhanden"];

    for (var bool_field = 0; bool_field < bool_checkboxes.length; bool_field++) {
        console.log(bool_checkboxes[bool_field]);
        $('#' + bool_checkboxes[bool_field]).click(function(){
            if(document.getElementById(bool_checkboxes[bool_field]).checked) {
                $("label[for=" + bool_checkboxes[bool_field] + "]").css("color", "#0d9eff");
            } else {
                $("label[for=" + bool_checkboxes[bool_field] + "]").css("color", "#b4b4b4");
            }
        });
    }

单击复选框时，我在 console.log 中收到此错误消息：

Uncaught TypeError: Cannot read property 'checked' of null
at HTMLInputElement.<anonymous> (main.js:292)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.r.handle (jquery.min.js:3)

【问题讨论】：

您可以使用 DOM 遍历来使 jQuery 逻辑通用，但是我们需要查看您的 HTML 以准确地向您展示如何做到这一点。您能否编辑您的问题以包含您的 HTML
为什么不直接使用 CSS？ stackoverflow.com/a/18397503/5882767
document 中是否有重复的id 的元素？你为什么在this上打电话给document.getElementById()？
您的意思是复选框“名称”或“ID”？看起来您所指的“名称”是“id”。如果您已经单击了该元素，if (this.checked)... 将不起作用吗？为什么要再次使用getElementById 选择它？如上所述，请发布您正在使用的确切 HTML，因为您甚至可能会使用纯 CSS 解决方案
ID 是正确的值，使用“this”解决了它，就像 abeyaz 的答案一样。 css 方法是个好主意，谢谢@zerohero

标签： javascript jquery arrays

【解决方案1】：

如果document 中没有具有重复id 的元素，则可以使用属性选择器

$("[id*='_']").on("click", function() {
  $(this.labels[0]).css("color", this.checked ? "#0d9eff" : "#b4b4b4");
})

【讨论】：

【解决方案2】：

试试这个。您不能在闭包内使用循环索引，因为它不会保持一致。在示例中使用this

$('#' + bool_checkboxes[bool_field]).click(function(){
    var cb = this, cbId = cb.id;
    if(cb.checked) {
            $("label[for=" + cbId + "]").css("color", "#0d9eff");
        } else {
            $("label[for=" + cbId + "]").css("color", "#b4b4b4");
        }
    });

【讨论】：