Question

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

我有一个有效的点击功能，它完美无缺，但只有我直接使用复选框名称（这里是复选框名称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)

Answer 1

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

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

Answer 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");
        }
    });

JavaScript数组不起作用，直接输入工作

2 个答案: