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

勾选框及文字:

 <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. Netty内存池及命中缓存的分配

    内存池的内存规格: 在前面的源码分析过程中,关于内存规格大小我们应该还有些印象.其实在Netty 内存池中主要设置了四种规格大小的内存:tiny 是指0-512Byte 之间的规格大小,small 是 ...

  2. 安装go版本

    下载地址(官网):https://golang.org/dl/ 下载地址(国内):https://dl.gocn.io/ 想编译GO,必须先有一个GO的编译器. 创建GO的编译器:[root@node ...

  3. CompletionService用法踩坑解决优化

    转自:https://blog.csdn.net/xiao__miao/article/details/86352380 1.近期工作的时候,运维通知一个系统的内存一直在增长,leader叫我去排查, ...

  4. SLA服务可用性4个9是什么意思?怎么达到?

    SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...

  5. jquery的扩展,及编辑插件的书写格式

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

  6. 攻防世界--simple-unpack

    下载链接:https://adworld.xctf.org.cn/media/task/attachments/b7cf4629544f4e759d690100c3f96caa 1.准备 获取到信息: ...

  7. JS 逻辑非!简单总结

    !""                  true!"aaa"          false""==false          true ...

  8. 20191114PHP验证码

    <?phpob_clean();$img=imagecreate(40,20);$back=imagecolorallocate($img,200,200,200); $blue=imageco ...

  9. 四、局域网连接SqlServer

    一.局域网连接SqlServer 一台服务器上装有四个数据库的时候,我们可以通过IP\实例名的方式进行访问. navicat 连接sqlserver数据库

  10. numpy知识点总结

    一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于数组的对象,如列表等 反过来转换则可以使用numpy.ndarray.tolist()函数,如a. ...