jQuery/css，基于单选按钮单击显示和隐藏 div答案

【问题标题】：jQuery/css, show and hide divs based on radio button clickjQuery/css，基于单选按钮单击显示和隐藏 div
【发布时间】：2017-04-28 09:02:30
【问题描述】：

从这个问题，我尝试在 css 和 jquery 中做一些事情。

jQuery , show and hide divs based on radio button click

我有 4 个单选按钮：

  <div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
    <div class="col-sm-8">
      <div class="input-group date">
        <input type="radio" name="rep" class="minimal">
        None
        <input type="radio" name="rep" class="minimal">
        Daily
      </div>
    </div>
  </div>

当检查无线电按钮时，我希望将其成为Visibel：

  <div class="form-group">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>

当每日单选按钮是 checke 时，我希望这是 visibel：

  <div class="form-group">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

顺便说一句，我几乎什么都试过了。

【问题讨论】：

对不起。我正在玩 php，但我只需要一种方法来隐藏一些仅在选中单选按钮时才可见的部分。所以一种或另一种方式很好:)
坦克每个人。我在@satpal 的回答中找到了解决方案。

标签： jquery css radio-button

【解决方案1】：

需要绑定radio元素的change事件处理函数，并建立:radio和div元素之间的关系。

脚本

var elems = $(':radio.minimal');
var continer = $('.radio-content');

elems.change(function() {                 
    //Hide all
    continer.hide();

    //Get Selected value
    var v = $(elems).filter(':checked').val();

    //Show the container
    continer.filter('[data-radio=' + v + ']').show();
}).change();

HTML，这里我添加了radio 元素的value 属性

<input type="radio" name="rep" class="minimal" value="none" checked>None
<input type="radio" name="rep" class="minimal" value="daily">Daily

这里添加了data-*前缀属性来建立关系，并添加了一个公共类radio-content来区分内容容器和其他div元素。

<div class="form-group radio-content" data-radio="none" style="display:none">
</div>
<div class="form-group radio-content" data-radio="daily" style="display:none">
</div>

var elems = $(':radio.minimal');
elems.change(function() {
  var v = $(elems).filter(':checked').val();
  var continer = $('.radio-content');
  //Hide all
  continer.hide();
  continer.filter('[data-radio=' + v + ']').show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
  <div class="col-sm-8">
    <div class="input-group date">
      <input type="radio" name="rep" class="minimal" value="none" checked>None
      <input type="radio" name="rep" class="minimal" value="daily">Daily
    </div>
  </div>
</div>


<div class="form-group radio-content" data-radio="none" style="display:none">
  <label class="col-sm-4 control-label"></label>
  <div class="col-sm-8">
    <div class="input-group">
      Test None
    </div>
  </div>
</div>

<div class="form-group radio-content" data-radio="daily" style="display:none">
  <label class="col-sm-4 control-label"></label>
  <div class="col-sm-8">
    <div class="input-group">
      Test Daily
    </div>
  </div>
</div>

【讨论】：

我发现了一个问题。当我使用时：

【解决方案2】：

$(document).ready(function(){
  
  $('input:radio[name="rep"]').change(function(){
             if($(this).val()=="Daily")
             {
               $("#divDailySelect").show();
               $("#divNoneSelect").hide();
             }
             else if($(this).val()=="None")
             {
                 $("#divNoneSelect").show();
                 $("#divDailySelect").hide();
             }
    });
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
 <div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
    <div class="col-sm-8">
      <div class="input-group date">
        <input type="radio" name="rep" class="minimal" value="None">
        None
        <input type="radio" name="rep" class="minimal" value="Daily">
        Daily
      </div>
    </div>
  </div>

<div class="form-group" id="divNoneSelect">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>

<div class="form-group" id="divDailySelect" style="display:none;">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

1) 添加一些value 到您的单选按钮（以识别单击了哪个单选）

<input type="radio" name="rep" class="minimal" value="None" checked>
None
<input type="radio" name="rep" class="minimal" value="Daily">
Daily

2) 在显示/隐藏 div 中提及一个类，以根据检查的内容定位它们。添加一个 hide 类，它将在开始时隐藏 div。

  <div class="form-group test-none hide">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>
  <div class="form-group test-daily hide">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

然后您可以使用以下 JQuery 代码来相应地显示/隐藏。通过删除之前添加的类hide。

$(document).ready(function() {
    $('input[type=radio][name=rep]').change(function() {
      var radioValue = $(this).attr('value');
      if(radioValue == 'None') {
        $('.test-none').removeClass('hide');
      } else if(radioValue == 'Daily') {
        $('.test-daily').removeClass('hide');
      }
    });
});

【讨论】：

【解决方案4】：

这是jsfiddle。我所做的只是将none 类添加到Test None 和daily 类添加到Test Daily。

jQuery如下

$(document).ready(function () {
    $("input[name=none]").on('change', function() {     
    $('.none').show();
    $('.daily').hide();
  })
  $("input[name=daily]").on('change', function() {
    $('.none').hide();
    $('.daily').show();
  })
})

而css只是将默认显示设置为无

.daily {
  display: none;
}

.none {
  display: none;
}

【讨论】：