如果选择了收音机，则 Jquery 显示隐藏 div

Question

我正在做一些项目， 我正在尝试的可能吗？ 我尝试编写的代码如下，这就是我想要做的：

我将从 my-db 生成更多折叠，并且将自动生成行 ID 和 href。

我想编写 jquery 脚本以通过每行中的单选按钮显示隐藏相关的 div。

提前致谢。

$('.row').each(function() {
  var rowID = $(this).data('row-id');
  var radioType = $(this).children().data('radio-type');
  $('input[type="radio"]').on('change', function() {
    if (radioType == 'personal') {
      $('#personal-div').show();
    } else if (radioType == 'business') {
      $('#business-div').show();
    } else{
    return;
    }
  }).trigger('change');
});

.radio-hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

Answer 1

您可以控制单选按钮以显示或隐藏 CSS 中的特定 div，如下所示：

$('.row').each(function() {
  var rowID = $(this).data('row-id');
  var radioType = $(this).children().data('radio-type');
  $('input[type="radio"]').on('change', function() {
    if (radioType == 'personal') {
      $('#personal-div').show();
    } else if (radioType == 'business') {
      $('#business-div').show();
    } else{
    return;
    }
  }).trigger('change');
});

.radio-hide {
  display: none;
}

input#id1:checked ~ #personal-div{
  display:block;
}

input#id2:checked ~ #business-div{
  display:block;
}

input#id3:checked ~ #personal-div{
  display:block;
}

input#id4:checked ~ #business-div{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" id="id1" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business" id="id2">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal" id="id3">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" id="id4" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

Answer 2

我为每个无线电组添加了一个条件，尽管它不像您所寻找的那样动态，但它仍然有效。

$('.row').each(function() {  
  $('input[type="radio"]').change(function() {    
    if($('input[name=radio-1]:checked').val() === "personal"){
    console.log($(this).val());
      $('#personal-div').show();
      $('#business-div').hide();
    }else if($('input[name=radio-1]:checked').val() === "business"){
    console.log($(this).val());
      $('#business-div').show();
      $('#personal-div').hide();
    }
  });
  $('input[type="radio"]').change(function() {    
    if($('input[name=radio-2]:checked').val() === "personal"){
    console.log($(this).val() + '2');
      $('#personal-div2').show();
      $('#business-div2').hide();
    }else if($('input[name=radio-2]:checked').val() === "business"){
    console.log($(this).val());
      $('#business-div2').show();
      $('#personal-div2').hide();
    }
  });
});

.radio-hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title - 2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-1" value="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" value="business">
      <div class="radio-hide" id="personal-div2">
        personal information
      </div>
      <div class="radio-hide" id="business-div2">
        business information
      </div>
    </div>
  </div>
</div>

Answer 3

我想出了，它正在工作，但如果它不正确，任何帮助仍然很感激。

$('.row').each(function () {
        var row = $(this);
        row.find('input[type=radio]').on('change', function () {
            var radioType = $(this).data('radio-type');
            if ( $(this).is(':checked')){
                row.find('.radio-hide').hide();
                row.find('.' + radioType).show('slow');
            }else {
                return;
            }
        }).trigger('change');
    });

.radio-hide{display:none;}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype" data-radio-type="personal" checked="checked">
      <label>Business</label>
      <input type="radio" name="radiotype" data-radio-type="business">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radiotype-2" data-radio-type="business" checked="checked">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
</div>