如何将元素传递给javascript函数并访问第一个子元素

Question

I am creating check-boxes in my ASP.NET code behind a file in C#. I am adding an attribute value before adding the control to the page, therefore ASP is adding the attribute to the span surrounding the check-box and the label for the text. It looks like this:

<span data-bind="visible: showCheckBox(this)">
   <input id="" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">    
   <label for="">Outside Source</label>
</span>

I have a function called showCheckBox() written in Knockout.js. It determines if the target checkbox should be displayed, based on the value of the selected item in the drop down list immediately preceding it. For example, if the value of the selected item in the drop down list is 1, then the target checkbox with a corresponding value of 1 would be visible. That function looks like this:

function showCheckBox(span) {
   var value = span.firstChild.value;
   return value == reason();  
}

reason() is the view model variable that holds the value of the selected drop down list item. No matter what I do, I cannot get the value of the check-box to be sent correctly. It is always undefined.

Answer 1

The first child in this HTML is actually a textNode , which firstChild will return if that is what is found. These are the actual characters it is returning: "↵ " (A return and a space).

You can use the firstElementChild property instead:

function showCheckBox(span) {
    var value = span.firstElementChild.value;
    return value == reason();  
}

Also, don't forget to check the support tables for firstElementChild .

Answer 2

After thinking about it for a while also, a coworked suggested this solution.

Instead of assigning the value of the check box as the ID that corresponds to the drop down list view model variable, he suggested I assign it in the data-bind attribute instead. In my C# code behind file, that looks like this

cb.Attributes.Add("data-bind", String.Format("visible: showCheckBox({0})", reasonDetails[i].ReasonForSendingNoticeID.ToString()));

Which looks like this when displayed in HTML

<span data-bind="visible: showCheckBox(1)" style="display: none;">
<input id="" type="checkbox" 
name="ctl00$MainContent$SecondaryForm$ctl00" value="Outside Source">
<label for="" style="display: inline;">Outside Source</label>
</span>

Then I changed the function as follows

function showCheckBox(id) {
    return id == reason();
}

Doing it like so allowed us to directly pass the value into the function without having to pass the element or its child.

Thank you for the help and suggestions.

Answer 3

The problem is hidden, and it's because you're for a large part not using KnockoutJS at all. You should check the docs for the KnockoutJS checked binding .

There should very likely be no reason to check the DOM inside view models, not even those handling visibility . Instead, use the view model . You haven't quite posted a complete minimal repro, but here's what it should more or less look like:

 function ViewModel() { var self = this; self.reasons = [{id: 1, txt: "Main reason"}, {id: 2, txt: "Other reason"}]; self.reason = ko.observable(self.reasons[0]); self.showCheckBox = ko.computed(function() { return self.reason().id === 1; }); self.hasOutsideSource = ko.observable(false); }; ko.applyBindings(new ViewModel()); 

 pre { font-family: consolas; background: smoke; border: 1px solid #ddd; padding: 5px; margin: 5px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <select data-bind="options: reasons, value: reason, optionsText: 'txt'"></select> <span data-bind="visible: showCheckBox"> <label> <input data-bind="checked: hasOutsideSource" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1"> Outside Source </label> </span> <hr> This would be sent to your server / debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

If you can't take the above approach, I strongly recommend considering skipping the use of KnockoutJS, because it'll probably cause you more trouble than it'll help you if you do to much DOM manipulation on your own.