Div not show/hide on radio button select

Question

maybe someone could help me. I'm trying to show defferent divs elements depends on selected radio button.

I have mvc project. In my .cshtml file i have:

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

and:

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

The problem is that div elements don't hide or show when clicking on them. Could anybody explain why this javascript/html behavior is like that and how to fix it?

EDIT

  <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, I did like you said and nothing is shown in console. But I have jquery linked in my page:

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

Answer 1

The problem was with icheck.js. Instead of:

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

should be used:

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

Answer 2

Your code seems to work as is after running 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>

Answer 3

its working fine (without any changes to your code) make sure Jquery loaded on client side, and add breakpoint to see its triggering or not.

NEW (try this one, also edited in 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();
});

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