Hiding fields with jquery in an asp application

Hiding fields with jquery in an asp application

I have an asp.net mvc4 application, i need some in this issue :
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
</head>
<br/><br/>
<center><strong style="color:red; font-size:x-large">Réserver une
véhicule</strong></center>
<br/><br/>
<form action="/User/Reserver" method="post" style="margin-left: 33%; ">
<div>
<strong style="color:blue">L'affaire de la réservation </strong>
<div>
<SELECT style="" name="id_affaire">
@for(int item =0; item < Model[0].Count; item++){
<OPTION
VALUE="@Model[0][item].Id_affaire">@Model[0][item].Affaire_description</OPTION>
}
</SELECT>
</div>
<br/> <br/>
</div>
<div>
<strong style="color:blue">Le matricule de véhicule </strong>
<div>
<SELECT style="" name="matricule">
@for(int item =0; item < Model[1].Count; item++){
<OPTION
VALUE="@Model[1][item].Id_vehicule">@Model[1][item].Matricule</OPTION>
}
</SELECT>
</div>
</div>
<br/><br/>
<div>
<input type="radio" name="choix" id="plus" value="Plus d'un jour"
style=" margin-left:0px; width: 30px" checked>
<strong style="color:black ">Plus d'un jour</strong>
<br/>
<div><strong style="color:blue ">Nombre de jours</strong></div>
<div><input type="text" name="nbr_jours"/></div>
<br/>
<div>
<strong style="color:blue ">A partir de </strong>
<div>
<input type="text" class="datepicker" name="date" value=""
style=""/>
</div>
</div>
</div>
<br/>
<div>
<input type="radio" name="choix" id="un" value="un jour" style="
margin-left:0px; width: 30px">
<strong style="color:black ">Un jour</strong>
<br/>
<div>
<strong style="color:blue ">Le : </strong>
<div>
<input type="text" class="datepicker" name="date" value=""
style=""/>
</div>
</div>
</div>
<br/>
<div>
<input type="radio" name="choix" id="periode" value="une periode"
style=" margin-left:0px; width: 30px">
<strong style="color:black ">Une période</strong>
<br/> <strong style="color:blue">La période </strong>
<div>
<SELECT style="" name="periode">
<OPTION VALUE="1">Matinale</OPTION>
<OPTION VALUE="2">Aprés Midi</OPTION>
</SELECT>
</div>
</div>
<div>
<strong style="color:blue ">Jour </strong>
<div>
<input type="text" class="datepicker" name="date" value=""
style=""/>
</div>
</div>
<br/>
<div><input type="submit" value="Reserver" name="btn"
style="color:black"/></div>
</form>
I need to fadein and fadeout the input elements when i check a radiobox :
for example if i check the <input type="radio" name="choix" id="plus"
value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked> all
the input in the div below will be hidden.
How can i do it with jquery?