Js勾选同意协议教程

Posted 我因代码而疯狂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js勾选同意协议教程相关的知识,希望对你有一定的参考价值。

html

样式我这里就不写了。

代码复制下来以后需要手动给.red-checkbox添加一个background背景框,就是未勾选时的框的图片,

然后再给.active添加一个勾选之后的背景框也就是有对钩的框。

原理就是利用js给class添加.active名称来改变样式

<div class="protocol reg1">
	<p id="notSelProtoError" class="error_msg">
    
	<span class="msgIcon"></span>
	请先勾选协议</p>
			
	<span id="isSelProto" class="red-checkbox" onClick="xy()"></span>已阅并同意
			
	<a target="_blank" class="baseColorFt" href="使用协议链接">《XXX使用协议》</a>&amp;
			
	<a target="_blank" class="baseColorFt" href="隐私协议链接">《隐私协议》</a>
			
</div>

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'){
			window.location.href="转跳链接";//判断class=red-checkbox active的跳转链接
			
		}else{
			document.getElementById("notSelProtoError").style.display = 'block';// 否则提示请勾选协议,原理是把id=notSelProtoError的样式改为block
		}	
	}

以上是关于Js勾选同意协议教程的主要内容,如果未能解决你的问题,请参考以下文章

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

eclipse 使用教程

Windows环境CMake安装教程

Windows环境CMake安装教程

node.js 安装步骤

my Eclipse如何正确安装