允许 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(){

    $("[class^='radioGroup']").click(function(){

        var inputValue = $(this).attr("value");

        var parents = $(this).parents(".form-group");

        var targetBox = parents.find("." + inputValue);

        parents.find('.radioOption').not(targetBox).hide();

        parents.find(targetBox).show();

    });

});