Скрытие поля с JQuery в приложении осины

Question

У меня есть приложение asp.net mvc4, мне нужно кое-кто в этом вопросе:

<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> 

мне нужно fadein и fadeout входных элементов, когда я проверить radiobox: для пример, если я проверил <input type="radio" name="choix" id="plus" value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked>, все данные, находящиеся в div ниже, будут скрыты.

Как я могу сделать это с помощью jquery?

Answer 1

$(document).ready(function(){ 
    $("input:radio").click(function(){ 
     $("input:radio").siblings("div").show(); 
     $(this).siblings("div").hide(); 
    }); 
    }); 

http://jsfiddle.net/ZfXTT/2/

Answer 2

$('input[name="choix"]').on('click', function(){ 
    var $this = $(this), 
    allinputs = $this.parent().find('input:not("' + $this + '")'); 
    if($this.is(':checked')) allinputs.fadeOut(300); 
    else allinputs.fadeIn(300); 
}); 

Answer 3

<script> 
    $(function() { 
     $(".datepicker").datepicker(); 

     $("#plus").click(function(ev){ 
      var $el = $(ev.currentTarget), 
       $target = $('div[data-toggler="' + $el.attr('id') + '"]'); 
      if ($el.prop("checked")) { 
       $target.fadeOut(); 
      } else { 
       $target.fadeIn(); 
      } 
     }) 
    }); 

</script> 
<div> 
    <label><!-- use label for good usability --> 
     <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> 
    </label> 
    <!-- set attr data-toggler for direct detection target --> 
    <div class="fadeToggle" data-toggler="plus"> 
     <label> 
      <strong style="color:blue ">Nombre de jours</strong><br /> 
      <input type="text" name="nbr_jours"/> 
     </label> 
     <br/> 
     <label> 
      <strong style="color:blue ">A partir de </strong><br /> 
      <input type="text" class="datepicker" name="date" value="" style=""/> 
     </label> 
    </div> 
</div>