关于前端的一些基础知识

当你用的是单选radio来实现上述的情况，当你选择不一样的radio就会显示不一样的div，直接使用方法有有直接js或者jq两个方法

html

<label class="inline radio"><input type="radio" name="valid_type" onclick="showTime()" value="0" checked>绝对</label>
<label class="inline radio"><input type="radio" name="valid_type" onclick="showTime()" value="1">相对</label>
<input type="datetime" class="demo-input" name="valid_time" value="" id="valid_time"  placeholder="日期">
<input type="num" style="display: none" class="demo-input" name="valid_date" id="valid_date" value=""  placeholder="天数">
		            

首先jq

$('input[type="radio"][name="valid_type"]').on('change',function(){ 
    var sel = $(this); 
    if(sel.val() == 1){ 
        $('#valid_date').show(); 
        $('#valid_time').show(); 
    }else{ 
        $('#valid_date').show(); 
        $('#valid_time').hide(); 
    }
);

然后js

function showTime(){
	if(document.getElementsByName("valid_type")[0].checked){
		document.getElementById("valid_time").style.display="";
		document.getElementById("valid_date").style.display="none";
	}else{
		document.getElementById("valid_time").style.display="none";
		document.getElementById("valid_date").style.display="";
	}
}

然后在是select下拉框方式，当你选择不一样的结果，显示不一样的样式

html

扫描二维码关注公众号，回复： 11093010 查看本文章

<select name="coupon_type" id="coupon_type">
    <option value="1" >满减券</option>
    <option value="2" >满折券</option>
</select>
<input type="text" class="text input-large" name="full" style="width:8%" value="">元，
<span id='reduce'>减<input type="text" class="text input-large" name="minus" style="width:8%"  value="">元</span>
<span id="discount" style="display: none">打<input type="text" class="text input-large" name="minus" style="width:8%"  value="">折</span>

$(function(){
    $(document).ready(function(){
        $("#coupon_type").change(function(){
            var coupon_type = $(this).val();
            if(coupon_type == 1){
                $("#reduce").show();
                $("#discount").hide();

            }else{
                $("#discount").show();
                $("#reduce").hide();
            }
        })
   })
});