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

Question

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

<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”不会被触发，因此即使某些单选按钮设置为 yes，我也隐藏了所有字段。

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

谢谢。

<小时/>

解决方案:谢谢@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>

Answer 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);
  });