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

勾选框及文字:

 <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. CCNA 之 一 网络基础

    计算机概念 很早期的计算机是一个庞然大物,可能都有几层楼那么高,随着技术的发展.更新,体型就变得越来越小,也越来越普及. 这个时候计算机与计算机之间就需要数据交流和信息的共享,早期是美国那边主要用于大 ...

  2. Linux删除自带的openjdk,安装jdk1.8

    第一步:查看有哪些安装包 [root@localhost ~]# rpm -qa | grep javatzdata-java-2016g-2.el7.noarchpython-javapackage ...

  3. [Bzoj2243][SDOI2011]染色(线段树&&树剖||LCT)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2243 线段树+树链剖分,在线段树需要每次用lt和rt两个数组记录当前区间的左右边界的颜色 ...

  4. Codeforces 1093C (思维+贪心)

    题面 传送门 题目大意: 有一个长n(n为偶数)的序列a 已知a满足 \(a_1≤a_2≤⋯≤a_n\) 给出一个长度为\(\frac{n}{2}\) 的序列b,定义\(b_i=a_i+a_{n-i+ ...

  5. python常用的时间方法

    from time import strftime setTime = strftime("%Y_%m_%d_%H_%M_%S", time.localtime()) // In ...

  6. Springboot消除switch-case方法

    Springboot消除switch-case方法 背景 最近,在使用springboot开发一个接口的时候,需要根据接收的请求事件类型,去执行不同的操作,返回不同的结果,基本逻辑如下: String ...

  7. 使用onfocus与onblur实现搜索框附加信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Java 8实战之读书笔记四:高效Java 8编程

    三.高效Java 8编程 第8章 重构.测试和调试 Java 8的新特性也可以帮助提升代码的可读性:      使用Java 8,你可以减少冗长的代码,让代码更易于理解      通过方法引用和S ...

  9. git_clone资源获取失败解决

    github上克隆一个仓库到本地,一直失败.还以为是git安装问题,卸载重装无效:又换了个大容量的磁盘目录位置:最后ECS系统也重装还是无效.. remote: Counting objects: 5 ...

  10. web笔记全

    1.项目流程与数据库 1.课程体系 阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...