jQuery WEUI的表单开关控件判断状态
jQuery WEUI的表单开关只是给了样式,但是该怎么判断它是开还是关闭状态呢?经过作者昨晚的思考,用一个hidden input()的值来标记开关是开状态还是关闭状态
需要先写一个input输入框为不可见状态,在前端开发判断我们基本都会用到input()为不可见状态来赋值改变值来达到判断的目的。
注意:input中的checked 属性是一个布尔属性。隐含元素,用于接收按钮的状态,一定要设置成checked提交才有效
$("#button1").bind("click", function () {
if($("#btn").val()=="off"){
$("#btn").val("on");
console.log("当前开关状态:"+$("#btn").val());
}else{
$("#btn").val("off");
console.log("当前开关状态:"+$("#btn").val());
}
if($("#btn").val()=="on"){
$("#emaillabel").html("手机号");
$("#email").attr("placeholder","请输入您的手机号");
}else if($("#btn").val()=="off"){
$("#emaillabel").html("邮箱号");
$("#email").attr("placeholder","请输入您的邮箱号");
}
});
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label" id="emaillabel">邮箱号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="email" name="email" placeholder="请输入你的邮箱" id="email">
</div>
<div class="weui-cell__ft" >
<button class="weui-vcode-btn" id="huoqurun">获取验证码</button>
</div>
</div>
<input hidden="hidden" id="btn" name="btn1" type="radio" value="off" checked="checked" />
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd" style="font-weight: 700;">手机号注册</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox" id="button1">
</div>
</div>