jQuery函数-单击并在页面加载时运行特定单选按钮

正义正义

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时,“当前”复选框仍被选中,但是这些字段是隐藏的,直到我再次手动单击它。默认情况下,这些字段是隐藏的。

克里斯蒂安·巴雷特(Kristian Barrett)

您需要做出两个不同的选择:

<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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在页面加载和按钮单击时运行定义的函数

来自分类Dev

加载页面而不是单击元素时运行的jQuery函数

来自分类Dev

创建一个独立于click事件的jquery函数,并在页面加载时运行

来自分类Dev

jQuery函数需要在页面加载时运行

来自分类Dev

jQuery移动页面加载时运行Javascript函数

来自分类Dev

确保JavaScript / jQuery函数始终在页面加载时运行

来自分类Dev

在初始页面加载和滚动时运行 jQuery 函数

来自分类Dev

在 iframe 中加载特定页面时运行函数

来自分类Dev

在单选按钮的特定单击上使用jquery在mvc中启用文本框/下拉列表

来自分类Dev

在页面加载时运行javascript函数

来自分类Dev

jQuery在页面加载时同时运行

来自分类Dev

当asp.net按钮单击事件完成时运行jQuery函数

来自分类Dev

当asp.net按钮单击事件完成时运行jQuery函数

来自分类Dev

jQuery-如果未选中单选按钮,则运行函数/代码

来自分类Dev

如何防止Knockout.js函数在页面加载时运行?

来自分类Dev

仅在页面加载后运行jQuery单击

来自分类Dev

如何仅在需要时运行jQuery函数?

来自分类Dev

HTML加载jQuery函数

来自分类Dev

使jQuery函数单独运行

来自分类Dev

jQuery函数未运行

来自分类Dev

使jQuery函数单独运行

来自分类Dev

单击时运行函数并在第二次单击时将其反转

来自分类Dev

jQuery .val()函数检查单选按钮的值

来自分类Dev

使用Jquery在特定div区域中单击按钮时加载页面

来自分类Dev

Rails + jQuery:JS函数在页面加载时自动保持运行

来自分类Dev

Rails + jQuery:JS函数在页面加载时自动保持运行

来自分类Dev

jQuery 从页面加载事件中运行一个函数

来自分类Dev

jQuery页面加载后,检查单选按钮是否已选中

来自分类Dev

jQuery-单击事件绑定并在页面加载时启动

Related 相关文章

  1. 1

    在页面加载和按钮单击时运行定义的函数

  2. 2

    加载页面而不是单击元素时运行的jQuery函数

  3. 3

    创建一个独立于click事件的jquery函数,并在页面加载时运行

  4. 4

    jQuery函数需要在页面加载时运行

  5. 5

    jQuery移动页面加载时运行Javascript函数

  6. 6

    确保JavaScript / jQuery函数始终在页面加载时运行

  7. 7

    在初始页面加载和滚动时运行 jQuery 函数

  8. 8

    在 iframe 中加载特定页面时运行函数

  9. 9

    在单选按钮的特定单击上使用jquery在mvc中启用文本框/下拉列表

  10. 10

    在页面加载时运行javascript函数

  11. 11

    jQuery在页面加载时同时运行

  12. 12

    当asp.net按钮单击事件完成时运行jQuery函数

  13. 13

    当asp.net按钮单击事件完成时运行jQuery函数

  14. 14

    jQuery-如果未选中单选按钮,则运行函数/代码

  15. 15

    如何防止Knockout.js函数在页面加载时运行?

  16. 16

    仅在页面加载后运行jQuery单击

  17. 17

    如何仅在需要时运行jQuery函数?

  18. 18

    HTML加载jQuery函数

  19. 19

    使jQuery函数单独运行

  20. 20

    jQuery函数未运行

  21. 21

    使jQuery函数单独运行

  22. 22

    单击时运行函数并在第二次单击时将其反转

  23. 23

    jQuery .val()函数检查单选按钮的值

  24. 24

    使用Jquery在特定div区域中单击按钮时加载页面

  25. 25

    Rails + jQuery:JS函数在页面加载时自动保持运行

  26. 26

    Rails + jQuery:JS函数在页面加载时自动保持运行

  27. 27

    jQuery 从页面加载事件中运行一个函数

  28. 28

    jQuery页面加载后,检查单选按钮是否已选中

  29. 29

    jQuery-单击事件绑定并在页面加载时启动

热门标签

归档