如果选择了单选，则jQuery show hide div

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果选择了单选，则jQuery show hide div相关的知识，希望对你有一定的参考价值。

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

i将从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>
答案

您可以控制单选按钮来显示或隐藏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>
另一答案

我为每个广播组添加了一个条件，尽管它并不像您所需要的那样动态，但它可以工作。 

$('.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>
另一答案

我想出了，它可以正常工作，但是如果它不正确，仍然可以得到任何帮助。

$('.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-hidedisplay:none;
<scrip
以上是关于如果选择了单选，则jQuery show hide div的主要内容，如果未能解决你的问题，请参考以下文章
 

 检查是不是选中了单选按钮jquery [重复]


 如何确定是不是选中了单选按钮？ [复制]


 JQuery Validation Plugin - 如果用户选择任一单选按钮，则验证字段。


 如果使用 PHP 选择了单选按钮（当前），如何在 Mysql 数据库中为出勤值添加 +1？


 JQuery hide()/show() 在 FF/IE 但不是 Chrome


 jQuery中其他