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

勾选框及文字:

 <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. vue构造器注册UI组件

    import ConfirmComponent from '../../components/confirm/index' import { mergeOptions } from '../plugi ...

  2. ‘’‘安装PyMouse,个人日志'''

    管理员启动CMD 1.直接pip install pymouse,成功安装, 2.安装PyHook: https://www.lfd.uci.edu/~gohlke/pythonlibs/ (向下滑动 ...

  3. 20、numpy——IO

    NumPy IO Numpy 可以读写磁盘上的文本数据或二进制数据. NumPy 为 ndarray 对象引入了一个简单的文件格式:npy. npy 文件用于存储重建 ndarray 所需的数据.图形 ...

  4. java中关于异常的处理

    初学java的时候,当我们碰到异常时,一般会把异常直接throws抛出去,或则在catch的时候,简单的写一句打印异常信息,但是在实际开发中,是不能这么做的.如果我们将底层的某一个异常简单的print ...

  5. XSLT学习(九)通过JavaScript转化xml

    如果您的浏览器支持 XSLT,那么在浏览器中它可被用来将文档转换为 XHTML. JavaScript 解决方案 在前面的章节,我们已向您讲解如何使用 XSLT 将某个 XML 文档转换为 XHTML ...

  6. repquota - 文件系统配额的汇总

    SYNOPSIS(总览) repquota [ -vugs ] filesystem... repquota [ -avugs ] DESCRIPTION(描述) repquota 显示与配额文件相关 ...

  7. python序列的深拷贝和浅拷贝

    python中的不可变类型 列举:数值,字符串.元组.字节串 数值及字符串“可变”'的假象 num = 123 mystr = 'abc' print(id(num), num) print(id(m ...

  8. java插件提示安全设定高,不能加载解决方法

    当不可信小应用程序或应用程序在 Web 浏览器中运行时,我应当如何控制? 本文适用于: Java 版本: 7.0, 8.0 通过 Java 控制面板设置安全级别 在 Java 控制面板中,单击 Sec ...

  9. 《Spring Boot实战》笔记(目录)

    目录 目 录第一部分 点睛Spring 4.x第1 章 Spring 基础 .............................................................. ...

  10. 前后端分离下的CAS跨域流程分析

    写在最前 前后端分离其实有两类: 开发阶段使用dev-server,生产阶段是打包成静态文件整个放入后端项目中. 开发阶段使用dev-server,生产阶段是打包成静态文件放入单独的静态资源服务器中, ...