同意相关条款未打钩时,登录按钮为灰色且无法提交,点击灰色的登录按钮提示同意相关条款,打钩后变成亮色且可以提交信息。
勾选框及文字:
<div class="check-rule">
<label>
<input type="checkbox" name="" id="check" class="hidden" οnchange="boxChange(this)" >
<i class="check" ></i>
</label>
我同意相关条款 <span ><font id="agreeRule" color="red" size="3"></font></span>
</div>
JS代码按钮变色实现:
function boxChange(obj){ if($(obj).prop("checked")){ //选中操作 var newbtn=document.getElementById("regist").src="../resources/img/regist-btn.png"; $("#regist").css("background",'url(' + newbtn + ')'); $("#agreeRule").hide(); }else{ //取消选中操作 var newbtn=document.getElementById("regist").src="../resources/img/regist-btngray1.png"; $("#regist").css("background",'url(' + newbtn + ')'); document.getElementById("agreeRule").innerHTML="请同意相关条款"; $("#agreeRule").show(); } }
JS代码判断checkbox是否选中操作:
function verify(){ var isCheck=$("#check").get(0).checked;//获取选中状态,返回true或者false if(!isCheck){ document.getElementById("agreeRule").innerHTML="请同意相关条款"; return; }else{ // 相关操作。。。 }