ASP.NET 单选按钮选择到 hide/show div 部分

Question

我试图根据 Yes/No 单选按钮选择的结果隐藏一个部分，其中“是”为真，“否”为假。如果用户选择一个按钮，我会在其中显示该字段，但它会同时显示是或否，如果用户单击否，它应该保持隐藏状态（它不会）。感谢您的帮助。

这是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 () {
    $('#ImportPartRadio input[type="radio"]').click(function () {
        if ($(this).val() === 'True') {
            $('#ImportPartQuestions').show();
        } else {
           $('#ImportPartQuestions').hide();
       }
   });
});

// 编辑以将大小写与您的 True 值匹配，并修正了一个拼写错误。

Answer 2

为什么不获取更健壮的更改事件：

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

       else {
           $('#ImportPartQuestions').hide();
       }
   });
});

Answer 3

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

ASP.NET 单选按钮选择到 hide/show div 部分

ASP.NET Radio buttons selection to hide/show div section

html

javascript

jquery

asp.net-mvc-4

razorengine