Javascript对checkbox勾选判断,错误提示和按钮变色操作



同意相关条款未打钩时,登录按钮为灰色且无法提交,点击灰色的登录按钮提示同意相关条款,打钩后变成亮色且可以提交信息。
勾选框及文字:
<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勾选判断,错误提示和按钮变色操作的更多相关文章
- checkbox勾选判断
var xieYi=document.getElementById("xieYi"); if(!xieYi.checked){ alert("请先阅读并勾选购买协议!&q ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
- 设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选
设置checkbox选中,设置radio选中,根据值设置checkbox选中,checkbox勾选 >>>>>>>>>>>>&g ...
- 获取checkbox勾选的id
需求描述:做批量删除或者批量修改的时候需要获得多个id,根据checkbox勾选来获取对应的d 两种方法: //html代码<table id="table1"> &l ...
- asp.net 翻页时用ViewState保存上一页checkbox勾选的值
/// <summary> /// checkbox勾选取消勾选事件 /// </summary> /// <param nam ...
- 用DIV遮罩解决checkbox勾选无效的问题
在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将click事件放到了DIV上.(其中使用了knockout.js) 代码大概如下: <div id="one" ...
- element checkbox 勾选时出现弹框提示。
复选框选中的时候,必须提示是否确定选中,取消勾选的时候也要. 不能解决的思路: 1.element的checkbox只有一个change事件,该事件只返回该选项最新的值(true,false)(不会返 ...
- TreeView CheckBox勾选联动
http://www.cnblogs.com/excellently/p/TreeViewCheckBox.html 在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节 ...
- checkbox勾选事件,JQ设置css,下拉框JQ选中
<input id="CheckMainCompany" type="checkbox"/> $(function() { $("#Che ...
随机推荐
- vue构造器注册UI组件
import ConfirmComponent from '../../components/confirm/index' import { mergeOptions } from '../plugi ...
- ‘’‘安装PyMouse,个人日志'''
管理员启动CMD 1.直接pip install pymouse,成功安装, 2.安装PyHook: https://www.lfd.uci.edu/~gohlke/pythonlibs/ (向下滑动 ...
- 20、numpy——IO
NumPy IO Numpy 可以读写磁盘上的文本数据或二进制数据. NumPy 为 ndarray 对象引入了一个简单的文件格式:npy. npy 文件用于存储重建 ndarray 所需的数据.图形 ...
- java中关于异常的处理
初学java的时候,当我们碰到异常时,一般会把异常直接throws抛出去,或则在catch的时候,简单的写一句打印异常信息,但是在实际开发中,是不能这么做的.如果我们将底层的某一个异常简单的print ...
- XSLT学习(九)通过JavaScript转化xml
如果您的浏览器支持 XSLT,那么在浏览器中它可被用来将文档转换为 XHTML. JavaScript 解决方案 在前面的章节,我们已向您讲解如何使用 XSLT 将某个 XML 文档转换为 XHTML ...
- repquota - 文件系统配额的汇总
SYNOPSIS(总览) repquota [ -vugs ] filesystem... repquota [ -avugs ] DESCRIPTION(描述) repquota 显示与配额文件相关 ...
- python序列的深拷贝和浅拷贝
python中的不可变类型 列举:数值,字符串.元组.字节串 数值及字符串“可变”'的假象 num = 123 mystr = 'abc' print(id(num), num) print(id(m ...
- java插件提示安全设定高,不能加载解决方法
当不可信小应用程序或应用程序在 Web 浏览器中运行时,我应当如何控制? 本文适用于: Java 版本: 7.0, 8.0 通过 Java 控制面板设置安全级别 在 Java 控制面板中,单击 Sec ...
- 《Spring Boot实战》笔记(目录)
目录 目 录第一部分 点睛Spring 4.x第1 章 Spring 基础 .............................................................. ...
- 前后端分离下的CAS跨域流程分析
写在最前 前后端分离其实有两类: 开发阶段使用dev-server,生产阶段是打包成静态文件整个放入后端项目中. 开发阶段使用dev-server,生产阶段是打包成静态文件放入单独的静态资源服务器中, ...