Show / Hide fields based on choice field selection using JQuery in SharePoint

As example I have created a simple list with:

• Name (Single line of text)
• Insurance (Choice)
• Family member1 (Single line of text)
• Family member2 (Single line of text)
• Family member3 (Single line of text)

If the Insurance field value is Family, fields Family member1, Family member2, Family member are "show". For other options in the Insurance, Family members fields are "hide".


Edit Default New form

Add a Web Part, Media and Content, Contend Editor.
In Edit Source paste next script

<script src="https://projekti/mc-putno_osiguranje/Shared%20Documents/jquery-1.3.2.js" type=text/javascript></script>
 
<script type="text/javascript">
 
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
 
//Define which columns to show/hide by default
  $('nobr:contains("Family member1")').closest('tr').hide();
  $('nobr:contains("Family member2")').closest('tr').hide();
  $('nobr:contains("Family member3")').closest('tr').hide();
//Show/hide columns based on Drop Down Selection
 $("select[title='Insurance']").change(function() {
  if ($("select[title='Insurance']").val() == "Family") {
  $('nobr:contains("Family member1")').closest('tr').show();
  $('nobr:contains("Family member2")').closest('tr').show();
  $('nobr:contains("Family member3")').closest('tr').show()
  } else if($("select[title='Insurance']").val() != "Family"){
  $('nobr:contains("Family member1")').closest('tr').hide();
  $('nobr:contains("Family member2")').closest('tr').hide();
  $('nobr:contains("Family member3")').closest('tr').hide();
  }
 });
});
</script>


Save Page.

Download jquery-1.3.2.js from link