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的值为时间或者“长期有效”
效果图
选择长期有效时
选择自定义并选择时间
湖上湖
阿晨1998
尚方宝剑之说
相关分类