how to hide/display controls in NewForm.aspx based on checkbox value in SharePoint list

Question

I have 1 checkbox in my sharepoint list with other columns. If checkbox value equal to 'true' i need to display some other controls, otherwise these controls should be hidden.

I open the New/Edit Item Aspx Page in Edit In Advance Mode add the Following script

 <script type="text/javascript">

 _spBodyOnLoadFunctionNames.push("hideFieldsOnStart");

 function hideFieldsOnStart() {

//hide the control at start
 var control = getTagFromIdentifierAndTitle("input","TextField","Percent");

control.parentNode.parentNode.parentNode.style.display="none";

//add an onchange event to the dropdown
 getTagFromIdentifierAndTitle("input","RadioButtons","IsPercent").onchange = function()   {ChangeEvent()};


 }


function ChangeEvent()
{

//get the dropdown
var dropDown = getTagFromIdentifierAndTitle("input","DropDownChoice","IsPercent");

//get the selected value
var option = dropDown.options[dropDown.selectedValue].text;
 alert(option)
 //get the control
 var control = getTagFromIdentifierAndTitle("input","TextField","Percent");

 //show hide based on your condition
  if(option == "true")
  {
 control.parentNode.parentNode.parentNode.style.display="";
  }
 else
 {
  control.parentNode.parentNode.parentNode.style.display="none";
 }

//this gets the field based on title identifier and tagname
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
 var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
 for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) ==   tempString.length - len)) {
 return tags[i];
}
}
return null;
 }
 </script>

I use this code, when i checked textfield is disable but not check textfield is diable.

Answer 1

I change this code. It is work for me :)

_spBodyOnLoadFunctionNames.push("hideFieldsOnStart");

 function hideFieldsOnStart() {

 var Percent= getTagFromIdentifierAndTitle("input","TextField","Percent");
 var Price= getTagFromIdentifierAndTitle("input","TextField","Price");

 Percent.parentNode.parentNode.parentNode.style.display="";
 Price.parentNode.parentNode.parentNode.style.display="none";
 getTagFromIdentifierAndTitle("input","BooleanField","IsPercent").onclick =    function()   {ChangeEvent()};
 }




 //this gets the field based on title identifier and tagname
 function getTagFromIdentifierAndTitle(tagName, identifier, title) 
 {
     var len = identifier.length;
     var tags = document.getElementsByTagName(tagName);
     for (var i = 0; i < tags.length; i++) 
     {
         var tempString = tags[i].id;
         if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) 
         {
             return tags[i];
         }
     }
     return null;
 }



 function ChangeEvent()
{

 //get the dropdown
 var dropDown = getTagFromIdentifierAndTitle("input","BooleanField","IsPercent")


//get the control
 var Percent= getTagFromIdentifierAndTitle("input","TextField","Percent");
 var Price= getTagFromIdentifierAndTitle("input","TextField","Price");

//show hide based on your condition
 if(dropDown.checked)
 {
 Percent.parentNode.parentNode.parentNode.style.display="";
 Price.parentNode.parentNode.parentNode.style.display="none";
 }
else
 {
 Percent.parentNode.parentNode.parentNode.style.display="none";
 Price.parentNode.parentNode.parentNode.style.display="";
 }
 }

Answer 2

Try this :

http://kishansharepoint.blogspot.in/2012/05/showhide-lookup-fields-with-jquery.html

It is done by using Jquery. simply you have to change the controls value that's it. For check box you just have to write it's title name.

Thanks