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

时间:2016-12-13 10:27:01

标签: jquery css radio-button

从这个问题来看,我试图在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>
顺便说一句,我几乎尝试过所有事情。

4 个答案:

答案 0 :(得分:1)

您需要绑定radio元素的更改事件处理程序,并在:radiodiv元素之间建立关系。

脚本

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>

答案 1 :(得分:0)

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');
      }
    });
});

答案 2 :(得分:0)

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:0)

这里是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;
}