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 ...
随机推荐
- 机器学习实战_基于Scikit-Learn和Tensorflow读书笔记
第一部分 机器学习基础 第二部分 神经网络和深度学习 第9章 运行Tensorflow 分布式系统:分布式系统的定义是这个系统建立在网络的操作系统,具有高度的内聚性和透明性,它与网络的区别在于高层软件 ...
- CCNA 之 二 OSI七层模型
OSI网际互联 OSI的概念 英文全称Open System Interconnect 开放系统互联参数模型,是由ISO国际标准化组织 定义的.它是个灵活的.稳健的和可互操作的模型,并不是协议,使用来 ...
- 索引及explain
索引好比书的目录.通过索引能快速的定位到一条数据. 在MySQL中除了B+树索引之外,还有一些其他的索引类型.比如:全文索引.(DB和DD索引叫R树索引).在MySQL cluster中是P树索引,m ...
- Windows下Nginx的启动、停止、重启等命令
Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍. 假设 ...
- java_第一年_JavaWeb(3)
ServletConfig对象 可以通过web.xml文件中的<init-param>标签来初始化参数,这些参数会在创建servlet实例时将其封装到ServletConfig对象中,并在 ...
- Linux文件目录可视化远程软件winscp的使用
这个软件不是必须的,一般有命令行就可以操作文件目录,但winscp有图形界面,双击文件就可以编辑和保存,使用方式更接近windows Winscp是开源软件,安装包可以自行下载获取找有关人士获取 要新 ...
- ORM多对多的实现
#coding=utf-8 from sqlalchemy import Table, Column, Integer,String,DATE, ForeignKey from sqlalchemy. ...
- 使用grunt0.4进行js代码混淆
1.grunt是基于node,node需要>=0.8.0的稳定版本(奇数是开发版,偶数是稳定版) 2.安装grunt脚手架 (mac电脑需要权限 在前面加上 sudo) npm install ...
- elasticsearch 深入 —— Search After实时滚动查询
Search After 一般的分页需求我们可以使用form和size的方式实现,但是这种分页方式在深度分页的场景下应该是要避免使用的.深度分页会随着请求的页次增加,所消耗的内存和时间的增长也是成比例 ...
- Nexus搭建Maven私服中央仓库
一.概述 1.概要 现在的项目基本都是用Maven来管理工程,这样一来在公司内容搭建一个私服就非常有必要了,这样一来可以管理公司内部用的JAR包,也可以管理第三方的各种JAR来,以免每次都要从外网的仓 ...