JQuery的新手,我具有以下功能。我正在尝试对其进行修改,因此它可以完成2件事:单击其他单选按钮时不触发该函数(我以为'#UpdateType input [type =“ radio”]'可以做到这一点),并且还可以在加载时运行该函数如点击。#UpdateType是与之配合使用的单选按钮的ID。有没有人有什么建议?
$(document).ready(updateTypeFunc);
$(document).ready(function () {
$('#UpdateTypeRB input[type="radio"]').click(updateTypeFunc);
});
function updateTypeFunc()
{
if ($(this).attr('id') == 'UpdateType' && $(this).val() == 'Current') {
$('.current-employee').show();
}
else {
$('.current-employee').hide();
}
}
截至目前,无论我单击哪个单选按钮,都会触发该ID。
编辑:HTML
<div class="col-md-10" id="UpdateTypeRB">
<label class="radio-inline">
<input class="btn btn-primary" data-val="true" data-val-required="Please select whether the employee is new or current." id="UpdateType" name="UpdateType" type="radio" value="New"> New
</label>
<br>
<label class="radio-inline">
<input checked="checked" class="btn btn-secondary" id="UpdateType" name="UpdateType" type="radio" value="Current"> Current
</label>
<br>
<span class="field-validation-valid text-danger" data-valmsg-for="UpdateType" data-valmsg-replace="true"></span>
</div>
剃刀:
<div class="form-group">
@Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<label class="radio-inline">
@Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary" }) New
</label>
<br />
<label class="radio-inline">
@Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary" }) Current
</label>
<br />
@Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" })
</div>
</div>
编辑2:感谢@KristianBarrett更新了JQuery。我尝试实现的$(document).ready以外的其他作品。
我总体上想要实现的是基于此单选按钮的刻度隐藏/显示页面上的某些必需元素。最初加载时未选中任何内容,因此用户被迫选择一个。然后,我使用Foolproof基于这些复选框(“当前”对勾)执行RequiredIf,并希望在用JQuery选中“当前”对用户后将其显示给用户。问题是,当验证在“提交”之后引发ErrorMessage时,“当前”复选框仍被选中,但是这些字段是隐藏的,直到我再次手动单击它。默认情况下,这些字段是隐藏的。
您需要做出两个不同的选择:
<div class="form-group">
@Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<label class="radio-inline">
@Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary new" }) New
</label>
<br />
<label class="radio-inline">
@Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary current" }) Current
</label>
<br />
@Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" })
</div>
然后,您可以将@checked = true
您希望在页面加载时单击的单选按钮应用到您的单选按钮上。像这样
@Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger", @checked = true })
当您将值绑定到模型上的两个不同值时,服务器将解析选定的值,并在返回视图后正确设置它们。
之后,您需要应用stweb给您的答案,但是您需要查找已选中的答案。
因此,您应该执行以下操作:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
clickFunc($(this));
});
clickFunc($('input[type=radio]:checked'));
});
function clickFunc($element){
var currentEmployee = $('.current-employee');
if ($element.attr('class').indexOf('current') !== -1) {
currentEmployee.show();
}
else {
currentEmployee.hide();
}
}
您需要在每次页面运行时重新应用javascript。因此,您迭代您的复选框并找到选中的复选框并单击它。
$('input[type=radio]:checked')
这将为您提供选中的单选按钮。然后,您可以将其传递给clickFunc$(document).ready()
编辑:
您正在做的另一件事是针对某些特定的ID进行硬编码。您应该更一般地思考。就像选择所有单选按钮,然后找到选中的按钮一样。当您更改模型的ID时,这使您的代码不易出错。您编写的代码越通用,维护的次数就越少。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句