Question

从这个问题来看，我试图在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>

顺便说一句，我几乎尝试过所有事情。

Answer 1

您需要绑定radio元素的更改事件处理程序，并在: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 ，这里我添加了value元素的radio属性

<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>

Answer 2

1）将一些value添加到您的单选按钮（以识别单击哪个无线电）

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

2）根据检查的内容，为你的show / hide 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');
      }
    });
});

Answer 3

＆＃13;

$(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();
             }
    });
  
  
  });

＆＃13;

<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>

＆＃13;

Answer 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;
}

jQuery / css，根据单选按钮单击显示和隐藏div

4 个答案: