1.当点击“长期有效”时,打印出“长期有效”。
2.当点击自定义后,显示时间弹出框并选择时间后,打印出当前日期。(这边要判断是否选择了日期,没有选择日期的话要alert选择时间)
HTML代码
<div class="col-sm-10">
<input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="option1" class="dateChoose" value="
0">
<label for="inlineRadio1">长期有效</label>
<input type="radio" name="inlineRadioOptions1" id="inlineRadio2" value="option2" class="dateChoose others" value=
"1">
<label for="inlineRadio2">自定义</label>
<input type="date" name="inlineDateChoose" class="form-control dateJump" id="datetimeInput" value="" placeholder="" style="width: 165px">
<button id="btn" class="btn">点我</button>
</div>
显示/隐藏效果代码
<style>
.others ~ input[type='date'] {
display:none;
}
.others:checked ~ input[type='date'] {
display:inline;
}
#date:before {
content:"before";
}
#date::before {
content:"before";
}
</style>
显示/隐藏JS效果代码
$(function(){
$(".dateChoose").click(function(){
$(this).siblings().attr("checked",false);
$(this).attr("checked",true);
if($(this).attr("class").indexOf('others')>=0){
$(this).siblings('.dateJump').show();
}
else{
$(".others").siblings('.dateJump').hide();
}
});
})
JS判断代码!!!!
var v1 = document.getElementById('inlineRadio1');
var v2 = document.getElementById('inlineRadio2');
if(v1.value == '0'){
times = "长期有效";
console.log(times);
return times;
}
else {
if(v2.value == '1'){
times = $(".dateJump");
console.log(times);
return times;
}
else {
alert("请选择截止时间");
return times;
}
}
$('.btn').click(function () {
console.log(times.val());
})//打印出times的值为时间或者“长期有效”
效果图
选择长期有效时
选择自定义并选择时间