使用 JavaScript onchange(&quot;<function> (this.id)&quot;) 在 c# CheckBox 与其他 c# 控件上

Question

I have a web document that has its fields populated dynamically from c# (.aspx.cs).

Many of these fields are TextBox or HtmlTextArea elements, but some are Checkbox elements.

For each of these I have the ID attribute populated on creation of the field, as well as using .Attributes.Add("onchange","markChanged(this.id)")

This works great on all the fields except Checkbox. So I created a markCheckChange as I discovered that the Checkbox won't accept style="backgroundColor:red" or .style.backgroundColor = "red" type arguments.

I also added an alert and found that the Checkbox is not actually passing the this.id into the parameter for markCheckChange(param) function.

As a result I am getting errors of the type:

unable to set property of undefined or null reference

Why and what is the difference between these controls, and is there a better way to handle this?

I just reviewed the inspect element again, and discovered that the Checkbox control is creating more than an input field of the type checkbox, it is also wrapping it in a span tag, and the onchange function is being applied to the span tag (which has no id) and not to the input tag that has the checkbox id. Whereas for TextBox and HtmlTextArea the input tag is put directly within the cell/td tag, no some arbitrary span tag.

So now the question becomes how to get the onchange function to apply to the input tag for the checkbox rather than the span tag encapsulating it?

Per request:

function markChange(param) {
        if (userStatus == "readonly") {
            document.getElementById("PrintRecButton").style.display = "none";
            document.getElementById("PrintPDFButton").style.display = "none";

            alert("Please login to make changes.\n\nIf you do not have access and need it,\n   contact the administrator");
            exit();
        }
        else {
            document.getElementById(param).style.backgroundColor = "teal";
            saved = false;
            var page = document.getElementById("varCurrentPage").value;
            markSaveStatus(page, false);
        }
    }

So far the markCheckChange is about the same, until I get it to pass the id correctly, I won't be able to figure out the right way to highlight the changed checkboxes.

Answer 1

I found an alternative.

As I mentioned in the edit to the question, the inspect element feature revealed that the CheckBox type control was creating a set of nested elements as follows:

<span onchange="markChange(this.id)">
    <input type="checkbox" id="<someValue>">
    <label for="<someValue>">
</span>

Thus when the onchange event occurred it happened at the span which has no id and thus no id was benig passed for the document.getElementById() to work.

While searching for why I discovered:

From there I found the following for applying labels to the checkboxes: https://stackoverflow.com/a/28675013/11035837

So instead of using CheckBox I shall use HtmlInputCheckBox . And I have confirmed that this correctly passes the element ID to the JavaScript function.