javascript - ASP.NET 单选按钮选择隐藏/显示 div 部分

Question

我试图根据“是/否”单选按钮选择的结果隐藏一个部分，其中"is"为真，“否”为假。我有它，如果用户选择一个按钮，则显示该字段，但它对"is"或“否”都执行此操作，而且如果用户单击“否”，它应该保持隐藏状态(但事实并非如此)。感谢您的帮助。

这是 JQuery 代码

$(document).ready(function () {
    $('input[type="radio"]').click(function () {
        if ($(this).prop('#ImportPartRadio', true)) {
            $('#ImportPartQuestions').show();
        }

       else if ($(this).prop('#ImportPartRadio', false)){
           $('#ImportPartQuestions').hide();
       }
   });
});

这是 div 部分

@*import parts radio button*@
    <div class="span-18 last" id="ImportPart">
        <table class="item-display">
            <tr>
                <td class="label required" id="ImportPartRadio">
                <div class='tooltip'>Is this an import part?<span class="tooltiptext">This information can be used to calssify the part for US Customs purposes.</span></div></td>
                <td class="value" colspan="5">
                    Yes: @Html.RadioButtonFor(model => model.ImportPart, true) 
                    No: @Html.RadioButtonFor(model => model.ImportPart, false) 
                </td>
            </tr>
             </table>
    </div>


    @*This table is for full procurement and sales procurement setup only*@
    <div class="span-18 last" id="ImportPartQuestions">
        <table class="item-display">
            <tr>
                <td class="label">If an import, what is the material and function of part?</td>
                <td colspan="5" class="value">
                    @Html.TextAreaFor(model => model.MaterialAndFunction, new { @placeholder = "Description Here", maxLength = 300 })
                    @Html.ValidationMessageFor(model => model.MaterialAndFunction)
                </td>
            </tr>
     </table>
</div>    

我已经在谷歌上搜索了几个小时，似乎找不到有效的解决方案，这与它们中的任何一个都完全正常工作一样接近。

Here is the html code rendered by the browser

Answer 1

$(document).ready(function() {
  $('input[name="ImportPart"]').change(function() {
    var radioValue = $(this).val();
    var questionsDiv = $('#ImportPartQuestions');
    if (radioValue == "True") {
      questionsDiv.show();
    } else {
      questionsDiv.hide();
    }
  });
});

或使用.toggle(display)

$('input[name="ImportPart"]').change(function() {
  $('#ImportPartQuestions').toggle(this.value === "True");
});