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

勾选框及文字:

 <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. PowerShell - Invoke VBA function

    $xl = new-object -comobject Excel.Application $source_wb = $xl.workbooks.open($source) $xl.visible=$ ...

  2. Linux 安装jdk+mysql+tomcat

    参考: 安装 jdk+mysql+tomcat   https://www.w3h5.com/post/65.html 安装 mysql  https://blog.csdn.net/qq_23123 ...

  3. python阳历转农历

    # 引入日历库模块 import sxtwl # 日历中文索引 ymc = ["十一", "腊", "正", "二", ...

  4. RMQ(连续相同最大值)

    http://poj.org/problem?id=3368 Frequent values Time Limit: 2000MS   Memory Limit: 65536K Total Submi ...

  5. 攻防世界--Shuffle

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/a03353e605bc436798a7cabfb11be073 1.准备 获得信息 3 ...

  6. 一键部署YApi

    编写docker-compose.yml version: '2.1' services: yapi: image: mrjin/yapi:latest # build: ./ container_n ...

  7. console.log的高级用法

    //基本用法 console.log('最常见用法\n换行'); console.error('输出错误信息 会以红色显示'); console.warn('打印警告信息 会以黄色显示'); cons ...

  8. IDEA中添加自定义的方法快捷方式

    IDEA中快速添加自己自定义的方法方法,想要什么快捷方法都行 作为一个从MyEclipse转IDEA的程序员,原来写main就能补全main方法,写syso就能补全System.out.println ...

  9. elasticsearch 基础 —— Get API

    Get API get API允许根据其id从索引中获取指定类型的JSON文档.以下示例从名为twitter的索引获取JSON文档,该索引类型名为_doc,id值为0: GET twitter/_do ...

  10. Sass函数-join()函数

    join() 函数是将两个列表连接合并成一个列表. >> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((b ...