允许 div 上的隐藏/显示仅在其单选按钮组内起作用，并且不会影响相同形式的其他单选按钮组

Question

所以我有这样的形式，其中有 3 个无线电组，它们根据选择的内容隐藏和显示自己的 div 集。

问题是我现在的代码隐藏了所有 3 个无线电组中的无线电内容 div。我该如何解决这个问题？

理想情况下，当表单加载时，所有“是”内容都会显示，当有人在问题 1 中选择“否”时，radioContentOne 会隐藏，radioContentTwo 会出现。

目前，当我在问题 1. radioContentOne 中选择“否”时，将隐藏三、四、五、六。我对 jquery 很陌生，不知道我哪里出错了。

<div class="row">

  <div class="col-lg-12">

    <div class="form-group">

        <label>question 1<label>

        <div class="custom-radio-checkbox d-inline-block">

            <div class="radio-input>

                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentOne" checked>

                  <label for="radio-no-border-inline-1">Yes</label>     

            </div>

        </div>

        <div class="custom-radio-checkbox d-inline-block">

             <div class="radio-input>

                  <input name="radioGroup1" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentTwo">

                  <label for="radio-no-border-inline-2">No</label>    

             </div>

        </div>

    </div>

</div>

<div class="row">

      <div class="col-lg-12">

        <div class="form-group">

            <label>question 2<label>

            <div class="custom-radio-checkbox d-inline-block">

                <div class="radio-input>

                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentThree" checked>

                      <label for="radio-no-border-inline-1">Yes</label>     

                </div>

            </div>

            <div class="custom-radio-checkbox d-inline-block">

                 <div class="radio-input>

                      <input name="radioGroup2" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentFour">

                      <label for="radio-no-border-inline-2">No</label>    

                 </div>

            </div>

        </div>

    </div>

 </div>

Answer 1

目前，您正在定位 HTML 中的所有项目，以便仅定位单击的组中的项目，您可以使用 .parents 选择器查找父级，然后搜索相关项目。https://api.jquery.com/parents/$(document).ready(function(){&nbsp; &nbsp; $("[class^='radioGroup']").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var inputValue = $(this).attr("value");&nbsp; &nbsp; &nbsp; &nbsp; var parents = $(this).parents(".form-group");&nbsp; &nbsp; &nbsp; &nbsp; var targetBox = parents.find("." + inputValue);&nbsp; &nbsp; &nbsp; &nbsp; parents.find('.radioOption').not(targetBox).hide();&nbsp; &nbsp; &nbsp; &nbsp; parents.find(targetBox).show();&nbsp; &nbsp; });});