[英]Div not show/hide on radio button select
maybe someone could help me.也许有人可以帮助我。 I'm trying to show defferent divs elements depends on selected radio button.我试图显示不同的 divs 元素取决于所选的单选按钮。
I have mvc project.我有 mvc 项目。 In my .cshtml file i have:在我的 .cshtml 文件中,我有:
$(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.问题是 div 元素在点击它们时不会隐藏或显示。 Could anybody explain why this javascript/html behavior is like that and how to fix it?任何人都可以解释为什么这种 javascript/html 行为是这样的以及如何解决它?
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. @JAG,我确实像你说的那样,控制台中没有显示任何内容。 But I have jquery linked in my page:但是我的页面中有 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>
The problem was with icheck.js.问题出在 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();
});
Your code seems to work as is after running tidy:您的代码在运行 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>
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.它的工作正常(没有对您的代码进行任何更改)确保在客户端加载Jquery
,并添加breakpoint
以查看其触发与否。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.