时间戳

首页 > 解决方案 > 允许在 div 上隐藏/显示仅在其无线电组内工作，并且不会以相同的形式影响其他无线电组

javascript - 允许在 div 上隐藏/显示仅在其无线电组内工作，并且不会以相同的形式影响其他无线电组

问题描述

所以我有这种形式，其中有 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>

<div class="row">
      <div class="col-lg-12">
        <div class="form-group">
            <label>question 3<label>
            <div class="custom-radio-checkbox d-inline-block">
                <div class="radio-input>
                      <input name="radioGroup3" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentFive" 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="radioGroup3" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentSix">
                      <label for="radio-no-border-inline-2">No</label>    
                 </div>
            </div>
        </div>
    </div>
 </div>


<div class="radioContentOne radioOption">content1</div>
<div class="radioContentTwo radioOption">content2</div>


<div class="radioContentThree radioOption">content3</div>
<div class="radioContentFour radioOption">content4</div>

<div class="radioContentFive radioOption">content5</div>
<div class="radioContentSix radioOption">content6</div>



$(document).ready(function(){
    $("[class^='radioGroup']").click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $('.radioOption').not(targetBox).hide();
        $(targetBox).show();
    });
});

标签： javascripthtmljquerybootstrap-4

解决方案

目前，您正在定位 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();
    });
});

推荐阅读