JQuery函数 - 在点击和页面加载时运行特定的单选按钮

Question

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：更新JQuery的感谢@KristianBarrett。除了我试图实现的$（document）.ready以外的其他作品。

我总体努力实现的是隐藏/显示基于此单选按钮打勾的页面上的某些必需元素。它最初加载没有检查，所以用户被迫选择一个。然后，我使用Foolproof来根据这些复选框（'Current'tick）执行RequiredIf，并且想要在用JQuery勾选'Current'之后向用户显示它们。问题是验证在提交后抛出一个ErrorMessage时，当前复选框被打勾，但是这些字段被隐藏，直到我再次手动点击它。这些字段默认为隐藏。

Answer 1

你需要作出两种不同的选择：

<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时，这会使您的代码更容易出错。你可以制作代码越通用，就越不需要维护。

Answer 2

要触发负荷试试这个：

$(document).ready(function() { 
    var $radioButton = $('#UpdateType input[type="radio"]'); 
    $radioButton.click(function() { 
     clickFunc($(this)); 
    }); 
    clickFunc($radioButton); 
}); 

function clickFunc($element){ 
    var currentEmployee = $('.current-employee'); 
    if ($element.attr('id') == 'UpdateType' && $element.val() == 'Current') { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
}