<script type="text/javascript"
src="ajax.googleapis.com/.../jquery.min.js"></script>
<script type="text/javascript">
//This function will fire after all of the
//page document elements have loaded:
$(document).ready(function() {
//I actually have three rows in my form with Unit Change in
//the column name. (Unit Change Planned Date, Unit Change
//Effective Date, and Unit Change Comments)
//A form's column names are in <nobr> tags.
//nobrUnit is a jQuery collection of <nobr> elements:
var nobrUnit = $("nobr:contains('Unit Change')");
//I am actually appending the asterisk(*) that you
//see when a field is required to each of the column names.
//I am making it red with the ms-formvalidation class. This doesn't make
//the field required but does offer emphasis. I
//actually am capturing this validation in my workflow...
//ugly I know!
var vSpan = "<span class=ms-formvalidation> *</span>";
$(nobrUnit).append(vSpan);
//Find the closest <tr> tag going up the DOM tree.
//This is the row you will show/hide.
//trUnit is a jQuery collection of those three rows:
var trUnit = $(nobrUnit).closest("tr");
//initially hide the three rows:
$(trUnit).hide();
//Find the checkbox that will trigger the show/hide.
//The only way I could traverse to that <input> tag
//was to find a parent element (<span> tag) to get a
//child reference with. The <span> tag's title element
//is also the text of that checkbox:
var inputUnit = $("span[title=Unit Test]>input");
//capture click behavior of the checkbox (<input> tag):
$(inputUnit).click(function(){
// If Unit Test checked:
if ($(inputUnit).is(":checked"))
{
//show the hidden <tr>s:
$(trUnit).show();
} //end if
else
{
//otherwise, hide it:
$(trUnit).hide();
//and set Unit Change Comment (multi-line textbox) value to no text:
$("*[title*=Unit Change]").val("");
} //end else
}); //end $(inputUnit).click function
}); //end $(document).ready function
</script>