同意相关条款未打钩时,登录按钮为灰色且无法提交,点击灰色的登录按钮提示同意相关条款,打钩后变成亮色且可以提交信息。

勾选框及文字:

 <div class="check-rule">
<label>
<input type="checkbox" name="" id="check" class="hidden" onchange="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{
// 相关操作。。。
}

												

Javascript对checkbox勾选判断,错误提示和按钮变色操作的更多相关文章

  1. checkbox勾选判断

    var xieYi=document.getElementById("xieYi"); if(!xieYi.checked){ alert("请先阅读并勾选购买协议!&q ...

  2. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

  3. 设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选

    设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...

  4. 获取checkbox勾选的id

    需求描述:做批量删除或者批量修改的时候需要获得多个id,根据checkbox勾选来获取对应的d 两种方法: //html代码<table id="table1"> &l ...

  5. asp.net 翻页时用ViewState保存上一页checkbox勾选的值

    /// <summary>        /// checkbox勾选取消勾选事件        /// </summary>        /// <param nam ...

  6. 用DIV遮罩解决checkbox勾选无效的问题

    在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将click事件放到了DIV上.(其中使用了knockout.js) 代码大概如下: <div id="one" ...

  7. element checkbox 勾选时出现弹框提示。

    复选框选中的时候,必须提示是否确定选中,取消勾选的时候也要. 不能解决的思路: 1.element的checkbox只有一个change事件,该事件只返回该选项最新的值(true,false)(不会返 ...

  8. TreeView CheckBox勾选联动

    http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...

  9. checkbox勾选事件,JQ设置css,下拉框JQ选中

    <input id="CheckMainCompany" type="checkbox"/> $(function() { $("#Che ...

随机推荐

  1. nodejs基础-nvm和npm

    nvm npm 更新 npm install npm@latest -g 本地安装 npm install 包名称 require(”包名“) 全局安装 npm install 包名 -g 可以直接作 ...

  2. IDF-CTF-简单的js加密 writeup

    题目链接: http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=43 知识点:js语法 这里这里→ http://c ...

  3. SAP中寻找增强的实现方法(转)

    SAP 增强已经发展过几代了,可参考 SAP 标准教材 BC425 和 BC427.简单的说SAP的用户出口总共有四代:1.第一代  基于源代码的增强.SAP提供一个空代码的子过程,在这个子过程中用户 ...

  4. spring-第九篇之高级依赖关系配置

    1.关于配置文件一些使用 组件与组件之间的耦合,采用依赖注入管理:基本类型的成员变量值,应该直接在代码中设置. 2.获取其他bean的属性值 PorpertyPathFactoryBean用来获取目标 ...

  5. Linux终端下简单的登录程序 密码不回显

    在Linux进行登录是输入密码不会被回显,所以我也写了个简单的登入程序,使得在输入密码时不再进行回显. #include <stdio.h> #include <stdlib.h&g ...

  6. node的fs模块使用————node

    node的fs模块使用----node fs模块是调用文件的模块. var fs=require('fs'); //引用模块. //查看文件信息 fs.stat('index.txt',functio ...

  7. 解决:Module not found: node_modules\sass-loader\package.json (directory description file)

    npm uninstall node-sass npm install node-sass@latest

  8. Java 集合遍历

    在集合中使用Lambda表达式 Map集合中 forEach and Map 常规遍历-> 两种遍历: Map map = new HashMap(); map.put(102, "张 ...

  9. Spring Boot 2 Webflux的全局异常处理

    https://www.jianshu.com/p/6f631f3e00b9 本文首先将会回顾Spring 5之前的SpringMVC异常处理机制,然后主要讲解Spring Boot 2 Webflu ...

  10. 机器学习——k-近邻(K-Nearest Neighbor)

    目录 K-Nearest neighbor K-近邻分类算法 从文本文件中解析和导入数据 使用python创建扩散图 归一化数值 K-Nearest neighbor (个人观点,仅供参考.) k-近 ...