Question

我试图根据Yes / No单选按钮选择的结果隐藏一个部分，其中yes为true且no为false。我知道如果用户选择一个按钮，就会显示该字段，但它会同时显示是或否，如果用户单击否，它应该保持隐藏状态（它不会隐藏）。谢谢你的帮助。

这是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");
});

Answer 2

$(document).ready(function () {
    $('#ImportPartRadio input[type="radio"]').click(function () {
        if ($(this).val() === 'True') {
            $('#ImportPartQuestions').show();
        } else {
           $('#ImportPartQuestions').hide();
       }
   });
});

//编辑以匹配具有您的True值的大小写，并修正了拼写错误。

Answer 3

为什么不获得更强大的更改事件：

cv

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

3 个答案: