RadioButtonFor 在加载页面后不调用 onchange答案

【问题标题】：RadioButtonFor doesn't call onchange after load the pageRadioButtonFor 在加载页面后不调用 onchange
【发布时间】：2018-12-17 07:55:12
【问题描述】：

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

<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。我遇到的问题是，当我加载表单时，它会按预期选择单选按钮，但未触发事件“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>

【问题讨论】：

检查控制台是否有错误。
“当我加载表单时”是什么意思？
@RoryMcCrossan 控制台上没有错误，我尝试在事件中添加“警报”，它没有被触发
@MustaphaLarhrouch 我第一次加载页面时
你试过在单选按钮上做.trigger('change')吗？

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

在 $(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);
  });

【讨论】：

【解决方案2】：

在function CallChangefunc(myRadioButton)之前添加$(document).ready

【讨论】：