从这个问题来看,我试图在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>
答案 0 :(得分: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>
答案 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)
$(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;
答案 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;
}