Js勾选同意协议教程-更新篇

我因代码而疯狂

已于 2022-03-08 15:52:43 修改

阅读量4.4k

点赞数 4

分类专栏： Js技术文章标签：同意协议勾选协议 JS 登陆协议隐私协议

于 2021-07-13 11:30:03 首次发布

本文链接：https://blog.csdn.net/qq_39476250/article/details/118695895

版权

Js技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个带有可切换背景的协议选择器。通过`red-checkbox`类控制未勾选与勾选状态，点击事件触发JS操作，实现在登录或注册时的协议同意验证。

摘要由CSDN通过智能技术生成

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

解释很详细

	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标签

之前是登录的同意协议，现在改为注册同意协议