html
代码复制下来以后需要手动给.red-checkbox添加一个background背景框,就是未勾选时的框的图片,
然后再给.active添加一个勾选之后的背景框也就是有对钩的框。
原理就是利用js给class添加.active名称来改变样式
<form name="loginform" class="resform" id="loginform" method="post" action="javascript:return false check()">
<div class="protocol reg1">
<span id="isSelProto" class="red-checkbox" onClick="xy()"></span>已阅并同意
<a target="_blank" class="baseColorFt" href="隐私协议链接">《隐私协议》</a>
<p id="notSelProtoError" class="error_msg"><span class="msgIcon"></span>请先勾选协议</p>
</div>
</form>
css
.red-checkbox{
background-image: url('https://img.58cdn.com.cn/git/teg-app-fe/passport-pc-ui/img/user-list-uncheck.png');//为了方便易懂,这边图放的是58的链接,仅供学习参考。
height: 17px;
width: 17px;
background-size: 14px 14px;
background-repeat: no-repeat;
vertical-align: middle;
display: inline-block;
cursor: pointer;
}
.active{
background-image: url('https://img.58cdn.com.cn/git/teg-app-fe/passport-pc-ui/img/user-list-check.png');//为了方便易懂,这边图放的是58的链接,仅供学习参考。
}
.error_msg{
display: none;
color: red;
}
Js
解释很详细
function xy()//点击后
{
var nav=document.getElementById("isSelProto");
nav.className = isSelProto.className=="red-checkbox"?"red-checkbox active":"red-checkbox";点击小方框时用换class名字的方式改变样式为打对钩
}
function js_method() //点击后
{
//这个是点击登录的时候判断有没有同意协议
if(isSelProto.className=='red-checkbox active'){
var form1=document.getElementById("loginform"); //form标签的id
form1.action = "注册提交的地址,就是form的地址";
form1.submit();//提交
}else{
document.getElementById("notSelProtoError").style.display = 'block';// 否则提示请勾选协议,原理是把id=notSelProtoError的样式改为block
}
}
更新:添加css必要样式
修改js提交后的form提交链接
html添加了form标签
之前是登录的同意协议,现在改为注册同意协议