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

时间：2017-01-06 14:18:06

标签： 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 个答案:

答案 0 :(得分：1)

问题在于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();
        });

答案 1 :(得分：0)

运行整洁后，您的代码似乎正常工作：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('input[type="radio"]').on("change", function() {
    var test = $(this).val();
    $(".bla").hide();
    $("#" + test).show();
  });
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

NEW（尝试这个，也在Code Snippet中编辑）

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

OLD 

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

＆＃13;
＆＃13; 
$(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();
  });

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题