I am developing a web based application in ASP.Net MVC using Entity Framework following the example cited at  http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html.

In the application, I have a one-to-many relationship between Employee and it's wife, daughter, and son. So to enable the user to add multiple wives, daughters or sons, views for Wife, Daughter, and son are created under an EditorTemplates folder. Then, as and when required these views are loaded using @Html.EditorFor(x => x.Wives) or @Html.EditorFor(x => x.Daughters) or @Html.EditorFor(x => x.Sons) as many as times needed.

Now, in these views, say for example, in Wife.cshtml there are certain controls that I want to show conditionally. To do that, if I insert a script shown below, the page stops getting loaded. On removing the scripts from the view, it works normally.

2. <script type="text/javascript">
3. 
   
4.     $(document).ready(function () {
5. 
   
6.         //Uncheck the CheckBox initially
7. 
   
8.         $('#gender').removeAttr('checked');
9. 
   
10.         // Initially, Hide the SSN textbox when Web Form is loaded
11. 
    
12.         $('#Male').hide();
13.         $('#Female').hide;
14. 
    
15.         $('#gender').change(function () {
16. 
    
17.             if (this.checked) {
18. 
    
19.                 $('#Male').show();
20.                 $('#Female').hide();
21. 
    
22. 
    
23. 
    
24.             }
25. 
    
26.             else {
27. 
    
28.                 $('#Female').show();
29.                 $('#Male').hide();
30. 
    
31.             }
32. 
    
33.         });
34. 
    
35.     });
36. 
    
37. </script>

Therefore, please tell me how to use jquery in the scenario described above.