JavaScript show/hide div based on radio button. First instance conflicts with other one. When I select true/false on one, it applies to both

user_10803502 0
Viewed 115

I would like it to function separately. I've been toying with this for a while, and I have tried putting them in separate tags, changing the $(this).attr("value") to $(this).attr("name"), and applying the changes in the HTML, but I cannot figure out how I would fix this. I am using ASP.NET MVC, with jquery-3.5.1.

Note: This is not the entire file, only the relevant parts. If I am incorrect about something and the whole file is needed, it is here: 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>
radio-button asp.net-mvc html jquery javascript
1 Answers

How about putting each block in a div having same class, here i have used js_option_container and using closest() to select closest parent, so that it can show or hide only div inside that container

$(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>

user_123589890
Related