时间戳

首页 > 解决方案 > RadioButtonFor 在加载页面后不调用 onchange

javascript - RadioButtonFor 在加载页面后不调用 onchange

问题描述

不确定标题是否有意义，但是当我们选择是/否单选按钮时，我有下面的代码来隐藏/显示某些字段

<div class="container" style="width:100%;margin-top:2%">
@if (Model != null)
{
    using (Html.BeginForm("NextButton_Click", "Questionnaire", FormMethod.Post))
    {
        <table class="table table-hover">
            <tbody>
                @for (int i = 0; i < Model.QuestionsPaging.Count(); i++)
                {
                    ...
                    <tr>
                        <td>
                            <p>
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, false, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("No")
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, true, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("Yes")
                            </p>
                            <div id="div_questions_@i" style="display:none">
                                ...
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
}

<script type="text/javascript">
    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true") {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

代码工作正常，我单击单选按钮，它按预期隐藏/显示 div。我遇到的问题是，当我加载表单时，它按预期选择了 RadioButton，但没有触发事件“onchange”，所以即使某些单选按钮设置为是，我也隐藏了所有字段。

我在网络方面没有太多经验，不知道如何解决它，我尝试了一些东西但没有奏效，欢迎任何帮助。

谢谢你。

解决方案：谢谢@jom

我添加了“ $(':radio[id^="QuestionsAnswers"]').trigger('change');” 并检查单选按钮是否被选中，因为“.trigger('change')”会触发每个单选按钮的事件，现在我有：

<script type="text/javascript">
    $(document).ready(function () {
        $(':radio[id^="QuestionsAnswers"]').trigger('change');
    });

    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true" && myRadioButton.checked) {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else if ($(myRadioButton).val().toLowerCase() === "false" && myRadioButton.checked) {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

标签： javascriptjqueryasp.netasp.net-mvc

解决方案

$(document).ready在结束</body>标记上或之前执行此操作。

  $(':radio[id^="QuestionsAnswers"]').trigger('change');

  // Or attach the handlers by script instead of going through Razor engine

  $(':radio[id^="QuestionsAnswers"]').change(function () {
    CallChangefunc(this);
  });

推荐阅读