在asp应用程序中使用jquery隐藏字段答案

【问题标题】：Hiding fields with jquery in an asp application在asp应用程序中使用jquery隐藏字段
【发布时间】：2013-08-21 08:46:07
【问题描述】：

我有一个 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 输入元素：例如，如果我选中<input type="radio" name="choix" id="plus" value="Plus d'un jour" style=" margin-left:0px; width: 30px" checked>，则下面div 中的所有输入都将被隐藏。

我怎样才能用 jquery 做到这一点？

【问题讨论】：

标签： javascript jquery html asp.net .net

【解决方案1】：

$('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);
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

很好，但如果我检查其他按钮并重新检查它，它就不起作用
2 件事 - 仅适用于 #plus 复选框，而不适用于 choix 复选框，并且无法切换隐藏元素的可见性。
@Kayen 2 件事- 它的单选按钮不是复选框，我已经添加了你所说的代码:)

【解决方案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>

【讨论】：