javascript - JavaScript 基于单选按钮显示/隐藏 div。第一个实例与另一个实例冲突。当我选择一个真/假时，它适用于两者

Question

我希望它单独运行。我已经玩了一段时间了，我尝试将它们放在单独的标签中，将 $(this).attr("value") 更改为 $(this).attr("name")，然后应用HTML 中的更改，但我无法弄清楚如何解决这个问题。我正在使用带有 jquery-3.5.1 的 ASP.NET MVC。

注意：这不是整个文件，只是相关部分。如果我对某些事情不正确并且需要整个文件，请点击此处：https ://pastebin.com/YXp1Msj3 。

            <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
            <div>
            <script>
                $(document).ready(function () {
                    $('input[type="radio"]').click(function () {
                        var inputValue = $(this).attr("value");
                        var targetBox = $("." + inputValue);
                        $(".box").not(targetBox).hide();
                        $(targetBox).show();
                    });
                });
            </script>
            <div>
                <span>Enable Two Factor Authentication? (Strongly Recommended) </span>
                <label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
                <label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
            </div>
            <div style="display:none" class="true box">
                <span>What implementation of 2FA would you like?</span>
                <select class="form-control" id="TotpEnabled" name="TotpEnabled">
                    <option value="true">Google Authenticator</option>
                    <option value="false">Email</option>
                </select>
            </div>
            <div style="display:none" class="false box">
                <label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
            </div>
    </div>
    <!--End JQUERY magic/start of next-->
            <div>
    <script>
        $(document).ready(function () {
            $('input[type="radio"]').click(function () {
                var inputValue = $(this).attr("value");
                var targetBox = $("." + inputValue);
                $(".box").not(targetBox).hide();
                $(targetBox).show();
            });
        });
    </script>

    <div>
        <label><input id="CoachEnabled" type="radio" name="athlete" value="false"> Athlete</label>
        <label><input id="CoachEnabled" type="radio" name="coach" value="true"> Coach</label>
    </div>
    <div style="display:none" class="true box">
        <div class="form-group">
            <label asp-for="CoachCode"></label>
            <input asp-for="CoachCode" class="form-control" />
            <span asp-validation-for="CoachCode" class="text-danger"></span>
        </div>
    </div>
    <div style="display:none" class="false box">
        <!--code left in case needed in future-->
    </div>
    <!--End JQUERY-->

    <div>

标签： javascripthtmljqueryasp.net-mvcradio-button

Answer 1

如何将每个块放在具有相同类的 div 中，在这里我使用js_option_container并使用closest()来选择最近的父级，以便它只能显示或隐藏该容器内的 div

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(this).closest(".js_option_container").find(".box").not(targetBox).hide();
    $(this).closest(".js_option_container").find(targetBox).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="js_option_container">

  <div>
    <span>Enable Two Factor Authentication? (Strongly Recommended) </span>
    <label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
    <label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
  </div>
  <div style="display:none" class="true box">
    <span>What implementation of 2FA would you like?</span>
    <select class="form-control" id="TotpEnabled" name="TotpEnabled">
      <option value="true">Google Authenticator</option>
      <option value="false">Email</option>
    </select>
  </div>
  <div style="display:none" class="false box">
    <label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
  </div>
</div>
<div class="js_option_container">
  <div>
    <label><input id="CoachEnabled" type="radio" name="game" value="false"> Athlete</label>
    <label><input id="CoachEnabled" type="radio" name="game" value="true"> Coach</label>
  </div>
  <div style="display:none" class="true box">
    <div class="form-group">
      <label asp-for="CoachCode"></label>
      <input asp-for="CoachCode" class="form-control" />
      <span asp-validation-for="CoachCode" class="text-danger"></span>
    </div>
  </div>
  <div style="display:none" class="false box">
    <!--code left in case needed in future-->
    <span>Hello world</span>
  </div>
  <!--End JQUERY-->

  <div>