Grid Popup Editing Template, show/hide field based on another bit field.

We have a grid that used a template editor for poup editing.
We have a bool field that if clicked, we want to show the corresponding value field, otherwise, hide it.

I gave the div that I want to hide/show an ID and set it's visibility to hidden (the first editor is the bool field):
<div>
            <div class="editor-label">
                <b>Right Ventricular Hypertrophy?</b>
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.IsRightVentHypertrophy)
                @Html.ValidationMessageFor(model => model.IsRightVentHypertrophy)
            </div>
        </div>
        <div id="RVentFuncDiv"  style="visibility: hidden; z-index: 9999;">
            <div class="editor-label">
                <b>Right Ventricular Function:</b>
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.fk_RightVentricularFunctionID, "RVFunction")
                @Html.ValidationMessageFor(model => model.fk_RightVentricularFunctionID)
            </div>
        </div>

I created the following js function on the editor template:

 function checkit(parent, child) {
        if ($("#" + parent).is(':checked'))
            $("#" + child).css("visibility", "visible");
        else
            $("#" + child).css("visibility", "hidden");
    }

and called it on it's document.ready:

$(document).ready(function () {
  $("#IsRightVentHypertrophy").change(function () {
            checkit("IsRightVentHypertrophy", "RVentFuncDiv");
        });
    });


Back on the main page the grid was assigned an event for edit:

.Name("echogrid")
.Events(e =>
    {
        e.Edit("editmode");
    })

An here is the js function for that event:
   function editmode(e) {
        checkit("IsRightVentHypertrophy", "RVentFuncDiv");
    }