关于前端的一些基础知识

 

 

当你用的是单选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

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

解决前台js弹框alert点击确定页面会刷新

原因是button缺少type类型,加上 type=“button” 就好了,本以为button本身就是按钮,不需要在声明它的类型了,这才导致了这次的问题。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值