I'm having an issue with what I believe is VF trying to interploate JavaScript. For example, given this JavaScript embedded in a VF page:

html += "<input type='checkbox' id='plVal" + val + "' value='" 
+ field.picklistValues[val]+ "'/> " + field.picklistValues[val] + "<br/>";

 This is output by VF:

html += "<input id="plVal&quot; + val + &quot;" type="checkbox" value="&quot; 
+ field.picklistValues[val]+ &quot;"/> " + field.picklistValues[val] + "<br/>";

notice that VF has apparently identified the <input> which is inside a JS string. It swapped the order of the id and type attributes, and screwed some stuff up. 

How can I prevent this? I tried the old trick surrrounding the JS code w/ html comments (<!-- -->), but VF outputs nothing but asterisks for the JS code. 

Any idea how to prevent this, besides moving JS to an external file?

I am trying to use the jQuery library for some visual effects for an Opportunity screen.

Currently, the below works fine for the view screen, where the div with id "size_details" will show/hide based on the mouse clicks for the href tag.

	<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-1.4.4.min.js')}"  />
	<apex:includeScript value="{!URLFOR($Resource.jquery, '/js/jquery-ui-1.8.10.custom.min.js')}"  />
	<apex:stylesheet value="{!URLFOR($Resource.jquery, '/css/ui-lightness/jquery-ui-1.8.10.custom.css')}"  />
	<script type="text/javascript">
		jQuery.noConflict();
	     
	   jQuery(document).ready(function($) {
	        $("#pnl_details").hide();
	 
	        $('#viewSizeDetails').click(function () {
	            if ($("#size_details").is(":hidden")) {
	                $("#size_details").slideDown("slow");
	                $("#viewSizeDetails").html("Hide Scope and Size Details");
	                 return false;
	            } else {
	                $("#size_details").hide("slow");
	                $("#viewSizeDetails").html("Show Scope and Size Details");
	             return false;
	            }
	        });        

	        $('#viewGapDetails').click(function () {
	            if ($("#gap_details").is(":hidden")) {
	                $("#gap_details").slideDown("slow");
	                $("#viewGapDetails").html("Hide Gap Details");
	                 return false;
	            } else {
	                $("#gap_details").hide("slow");
	                $("#viewGapDetails").html("Show Gap Details");
	             return false;
	            }
	        });   
	        
	        
	        
	        $('#scopeSizeCheckbox').click(function () {
	            if ($("#size_details").is(":hidden")) {
	                $("#size_details").slideDown("slow");
	                $("#viewSizeDetails").html("Hide Gap Details");
	                 return false;
	            } else {
	                $("#size_details").hide("slow");
	                $("#viewSizeDetails").html("Show Gap Details");
	             return false;
	            }
	        });   
	        
	        
	    });
	</script>

            <apex:pageBlockSection title="Do we know the scope and size?" columns="2"  collapsible="false">
                <apex:pageBlockSectionItem labelStyleClass="oppCheckboxLabel" dataStyleClass="oppCheckbox" >
					<apex:outputLabel value="True?" />
                    <apex:outputField value="{!opportunity.Do_we_know_the_scope_and_size__c}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem labelStyleClass="oppInfoLabel" 
                    dataStyleClass="oppInfoBox">
                    <apex:outputLabel value="Info" for="primary4Info"/>
                    <apex:outputField id="primary4Info" 
                    value="{!opportunity.Do_we_know_the_scope_and_size_info__c}" 
                    styleClass="oppInfoTextArea" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>   
                        

			<p style="padding-left:35px; display:{!if(opportunity.Do_we_know_the_scope_and_size__c==True,'block','none')}"><a id="viewSizeDetails" href="#">Show Scope and Size Details</a></p>
			<!--Use a Standard Div not an apex outputpanel simplifies selection process for jQuery no need for !$Component to get the element id-->  
			<div id="size_details" style='padding-left:35px; display:none'>
	            <c:oppSizeInfoView opportunity="{!opportunity}" rendered="{!if(opportunity.Do_we_know_the_scope_and_size__c==True,True,False)}" />
			</div>
			

However, now I want to get the same effect (showing/hiding the div) when the input Field is changed on the Edit Screen:

            
            <apex:pageBlockSection title="Do we know the scope and size?" columns="2"  collapsible="false">
                <apex:pageBlockSectionItem id="scopeSizeCheckbox" labelStyleClass="oppCheckboxLabel" dataStyleClass="oppCheckbox" >
					<apex:outputLabel value="True?" />
                    <apex:inputField value="{!opportunity.Do_we_know_the_scope_and_size__c}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem labelStyleClass="oppInfoLabel" 
                    dataStyleClass="oppInfoBox">
                    <apex:outputLabel value="Info" for="primary4Info"/>
                    <apex:inputField id="primary4Info" 
                    value="{!opportunity.Do_we_know_the_scope_and_size_info__c}" 
                    styleClass="oppInfoTextArea" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>   


			<!--Use a Standard Div not an apex outputpanel simplifies selection process for jQuery no need for !$Component to get the element id-->  
			<div id="size_details" style="padding-left:35px; display:{!if(opportunity.Do_we_know_the_scope_and_size__c==True,'block','none')}">
	            <c:oppSizeInfo opportunity="{!opportunity}" />
			</div>
			             

The change is not detected for the inputField, because the HTML created from the page does not use that as the actual id of the checkbox field.

Has anyone integrated jquery with onChange events for input Fields?