堆栈内存溢出
  繁体   English   中英

Div 不显示/隐藏单选按钮选择

[英]Div not show/hide on radio button select

 原文  2017-01-06 14:18:05  9   3    javascript/ jquery/ html/ asp.net-mvc

问题描述

也许有人可以帮助我。 我试图显示不同的 divs 元素取决于所选的单选按钮。

我有 mvc 项目。 在我的 .cshtml 文件中，我有：

      $(document).ready(function () {
          $('input[type="radio"]').on("change", function () {
           var test = $(this).val();
           $(".bla").hide();
           $("#" + test).show();
       }); 
      });

和：

     @using (Html.BeginForm("CreateEvent", "Calendar", FormMethod.Post, new @class = "form-horizontal" }))
     {
                         <div>
                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "privateDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "private", @checked = true}) smth1</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "groupsDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "groups"}) smth2</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "classesDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "classes"}) smth3</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> @Html.RadioButtonFor(m => m.Distribution, "allDiv", new {@class = "choseOptionClass", @name = "choseOptions", @id = "all" }) smth4</label>
                            </div>
                        </div>
                        <div id="privateDiv" class="bla">private</div>
                        <div id="groupsDiv" class="bla">groups</div>
                        <div id="classesDiv" class="bla">
                            @Html.DropDownListFor(model => model.SelectedValues, Enumerable.Empty<SelectListItem>(),new { @class="chosen-select", tabindex = "4", @id="mySelect", @multiple = true})
                        </div>

                        <div id="allDiv" class="bla">
                            all
                        </div>
     }

问题是 div 元素在点击它们时不会隐藏或显示。 任何人都可以解释为什么这种 javascript/html 行为是这样的以及如何解决它？

编辑

  <form action="/Calendar/Calendar/CreateEvent/" class="form-horizontal" method="post">                        <div class="modal-body">
                        <label class="control-label">Title:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" />
                                </div>
                            </div>
                        </div>

                        <label class="control-label">Date from:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <div class='input-group date' id='datestart'>
                                        <input class="form-control" id="StartDate" name="StartDate" type="text" value="" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <label class="control-label">EndDate:</label>
                        <div class="row">
                            <div class='col-sm-12'>
                                <div class="form-group">
                                    <div class='input-group date' id='dateend'>
                                        <input class="form-control" id="EndDate" name="EndDate" type="text" value="" />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <label>Udostępnij dla:</label>
                        <div>
                            <div class="i-checks checkbox-inline">
                                <label> <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" /> Prywatne</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" /> Grupa</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" /> Przedmiot</label>
                            </div>

                            <div class="i-checks checkbox-inline">
                                <label> <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" /> Wszyscy</label>
                            </div>
                        </div>
                        <div id="privateDiv" class="bla">private</div>
                        <div id="groupsDiv" class="bla">groups</div>
                        <div id="classesDiv" class="bla">
                            <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select>
                        </div>

                        <div id="allDiv" class="bla">
                            all
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add event</button>
                    </div>
</form>

@JAG，我确实像你说的那样，控制台中没有显示任何内容。 但是我的页面中有 jquery 链接：

<script src="/Scripts/jquery-3.1.0.min.js"></script>

<script src="/Scripts/bootstrap.min.js"></script>

<script src="/Scripts/plugins/metisMenu/metisMenu.min.js"></script>

<script src="/Scripts/plugins/pace/pace.min.js"></script>

<script src="/Scripts/plugins/slimScroll/jquery.slimscroll.min.js"></script>

<script src="/Scripts/app/inspinia.js"></script>



<script src='/Scripts/jquery-ui/jquery-ui.js'></script>

<script src='/Scripts/moment.min.js'></script>

<script src='/Scripts/fullcalendar/fullcalendar.js'></script>

<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="/Scripts/iCheck/icheck.js"></script>

<script type="text/javascript" src="/Scripts/chosen/chosen.jquery.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $('input[type="radio"]').on("change", function() {
      console.log('working'); // see it logs on console 
      debugger; // this will pause the code here
      var test = $(this).val();
      $(".bla").hide();
      $("#" + test).show();
      });
    });
</script>

3 个解决方案

解决方案1
 1 已采纳  2017-01-06 16:39:56

问题出在 icheck.js 上。 代替：

      $('input[type="radio"]').on("change", function() {
        console.log('working'); // see it logs on console 
        debugger; // this will pause the code here
        var test = $(this).val();
        $(".bla").hide();
        $("#" + test).show();
      })

应该使用：

     $('input').on('ifChecked', function (event) {
            var divToShow = event.target.value;
            $(".bla").hide();
            $("#" + divToShow).show();
        });

解决方案2
 0  2017-01-06 14:32:43

您的代码在运行 tidy 后似乎可以正常工作： 

 $(document).ready(function() { $('input[type="radio"]').on("change", function() { var test = $(this).val(); $(".bla").hide(); $("#" + test).show(); }); })
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="control-label">Title:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" /> </div> </div> </div> <label class="control-label">Date from:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <div class='input-group date' id='datestart'> <input class="form-control" id="StartDate" name="StartDate" type="text" value="" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <label class="control-label">EndDate:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <div class='input-group date' id='dateend'> <input class="form-control" id="EndDate" name="EndDate" type="text" value="" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <label>Udostepnij dla:</label> <div> <div class="i-checks checkbox-inline"> <label> <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" />Prywatne</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" />Grupa</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" />Przedmiot</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" />Wszyscy</label> </div> </div> <div id="privateDiv" class="bla">private</div> <div id="groupsDiv" class="bla">groups</div> <div id="classesDiv" class="bla"> <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select> </div> <div id="allDiv" class="bla"> all </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary">Add event</button> </div>

解决方案3
 0  2017-01-06 14:40:29

它的工作正常（没有对您的代码进行任何更改）确保在客户端加载Jquery ，并添加breakpoint以查看其触发与否。

新（试试这个，也在代码片段中编辑）

$(document).ready(function() {
    console.log('loaded'); 
    $(document).on("change", 'input[type="radio"]', function() {
        console.log('working'); // see it logs on console 
        var test = $(this).val();
        $(".bla").hide();
        $("#" + test).show();
    });
});

老的

$('input[type="radio"]').on("change", function() {
  console.log('working'); // see it logs on console 
  debugger; // this will pause the code here
  var test = $(this).val();
  $(".bla").hide();
  $("#" + test).show();
});


 $(document).ready(function() { $(document).on("change", 'input[type="radio"]', function() { console.log('working'); // see it logs on console var test = $(this).val(); $(".bla").hide(); $("#" + test).show(); }); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form action="/Calendar/Calendar/CreateEvent/" class="form-horizontal" method="post"> <div class="modal-body"> <label class="control-label">Title:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <input class="form-control" id="Title" name="Title" placeholder="Title here" type="text" value="" /> </div> </div> </div> <label class="control-label">Date from:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <div class='input-group date' id='datestart'> <input class="form-control" id="StartDate" name="StartDate" type="text" value="" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <label class="control-label">EndDate:</label> <div class="row"> <div class='col-sm-12'> <div class="form-group"> <div class='input-group date' id='dateend'> <input class="form-control" id="EndDate" name="EndDate" type="text" value="" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <label>Udostępnij dla:</label> <div> <div class="i-checks checkbox-inline"> <label> <input checked="True" class="choseOptionClass" id="private" name="Distribution" type="radio" value="privateDiv" />Prywatne</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="groups" name="Distribution" type="radio" value="groupsDiv" />Grupa</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="classes" name="Distribution" type="radio" value="classesDiv" />Przedmiot</label> </div> <div class="i-checks checkbox-inline"> <label> <input class="choseOptionClass" id="all" name="Distribution" type="radio" value="allDiv" />Wszyscy</label> </div> </div> <div id="privateDiv" class="bla">private</div> <div id="groupsDiv" class="bla">groups</div> <div id="classesDiv" class="bla"> <select class="chosen-select" id="mySelect" multiple="True" name="SelectedValues" tabindex="4"></select> </div> <div id="allDiv" class="bla"> all </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary">Add event</button> </div> </form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 启用“选择”单选按钮值，以div显示并隐藏 从组中选择一个单选按钮，并显示show div 使用单选显示和隐藏div jQuery在Radio Select上显示Hide Div 在单选按钮上单击，隐藏/显示Div不起作用 单击图像或单选按钮显示和隐藏div 根据单选按钮显示隐藏div和脚本 jQuery hide / show div，带有单选按钮控件 在选定的单选按钮后显示/隐藏div 根据单选按钮选择显示/隐藏div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM