单选按钮上的 JQuery 单击未捕获抛出 TypeError : Cannot read property 'indexOf' of undefined

Question

我有一个表单，当您单击/选中特定单选按钮时，它会显示或隐藏某些元素。此函数还需要在页面加载时运行，以防 MVC 验证在发布时返回错误。问题是我在页面加载时遇到 TypeError: Cannot read property 'indexOf' of undefined ，尽管代码确实有效，但它破坏了脚本部分中其下方的所有代码。我得出的结论是，我没有检查此处正确选择了哪个单选按钮: if ($element.attr('class').indexOf('update-type-check-current') !== -1).

JQuery:

$(document).ready(function () {
    $('#CurrentEmployeeRB input[type="radio"]').click(function () {
        clickFunc($(this));
    });
    clickFunc($('#CurrentEmployeeRB input[type=radio]:checked'));
});

function clickFunc($element) {
    var currentEmployee = $('.current-employee');
    if ($element.attr('class').indexOf('update-type-check-current') !== -1) {
        currentEmployee.show();
    }
    else {
        currentEmployee.hide();
    }
}

HTML:

<div class="form-group">
    <label class="col-md-2 control-label" for="UpdateType">New or Current?</label>
    <div class="col-md-10" id="CurrentEmployeeRB">
        <label class="radio-inline">
            <input class="btn btn-primary update-type-check-new" 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 class="btn btn-secondary update-type-check-current" 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>

Razor :

<div class="form-group">
    @Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" })
    <div class="col-md-10" id="CurrentEmployeeRB">
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary update-type-check-new" }) New
        </label>
        <br />
        <label class="radio-inline">
            @Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary update-type-check-current" }) Current
        </label>
        <br />
        @Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" })
    </div>
</div>

我应该采取不同的方式吗？我刚刚开始学习 JQuery，到目前为止我还没有通过搜索找到任何可行的替代方案。

Answer 1

你应该准备好换线

clickFunc($('#CurrentEmployeeRB input[type=radio]:checked'));

与

if($('#CurrentEmployeeRB input[type=radio]:checked').length >= 1) {
   clickFunc($('#CurrentEmployeeRB input[type=radio]:checked'));
}