JavaScript Array does not work, direct input works

Question

I have an array with values which represent checkboxes on my website. I want to make the label of the correspinding checkbox become blue if the checkbox is clicked.

I have a working click function and it works perfectly, but only if I use the checkbox name directly (here is the checkboxname 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");
            }
        });

I have multiple checkboxes on my website and its more efficient to use an array, because I dont want to write down the same code multiple times. But somehow it does not work eventhough the consol.log shows me the correct checkbox names:

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

I get this error message in the console.log when clicking on a checkbox:

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)

You can use DOM traversal to make the jQuery logic generic, however we need to see your HTML to show you exactly how to do that. Could you please edit your question to include your HTML — Rory McCrossan, Dec 19 '16 at 09:06
Why not just use CSS? http://stackoverflow.com/a/18397503/5882767 — zerohero, Dec 19 '16 at 09:08
Are the elements with duplicate `id`'s within `document`? Why do you call `document.getElementById()` on `this`? — guest271314, Dec 19 '16 at 09:16
You mean checkbox "name" or "id"? It looks like the "name" you are referring to is the "id". If you already have the element clicked would `if (this.checked)...` not work? Why select it again using `getElementById`? As mentioned above, please post the exact HTML you are working with as you might even get away with a pure CSS solution — Nope, Dec 19 '16 at 09:18
ID is the correct value and using "this" solved it as in the answer of abeyaz. The css approach is a nice idea, thanks @zerohero — Roman, Dec 19 '16 at 09:20
You might even get away with a single line ► `$("label[for=" + this.id + "]").toggleClass('')` if you can use classes. Anyway, you seem to have it sorted :) — Nope, Dec 19 '16 at 09:24

score 2 · Answer 1 · answered Dec 19 '16 at 09:21

2

If the are no elements with duplicate id in document you can use attribute selector

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

answered Dec 19 '16 at 09:21

guest271314

1
15
104
177

score 0 · Accepted Answer · answered Dec 19 '16 at 09:11

Try this one. You cannot use your loop index inside the closure as it wont be consistent. Use this as in the example

$('#' + 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 Array does not work, direct input works

2 Answers2