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 ...
随机推荐
- Netty内存池及命中缓存的分配
内存池的内存规格: 在前面的源码分析过程中,关于内存规格大小我们应该还有些印象.其实在Netty 内存池中主要设置了四种规格大小的内存:tiny 是指0-512Byte 之间的规格大小,small 是 ...
- 安装go版本
下载地址(官网):https://golang.org/dl/ 下载地址(国内):https://dl.gocn.io/ 想编译GO,必须先有一个GO的编译器. 创建GO的编译器:[root@node ...
- CompletionService用法踩坑解决优化
转自:https://blog.csdn.net/xiao__miao/article/details/86352380 1.近期工作的时候,运维通知一个系统的内存一直在增长,leader叫我去排查, ...
- SLA服务可用性4个9是什么意思?怎么达到?
SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...
- jquery的扩展,及编辑插件的书写格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 攻防世界--simple-unpack
下载链接:https://adworld.xctf.org.cn/media/task/attachments/b7cf4629544f4e759d690100c3f96caa 1.准备 获取到信息: ...
- JS 逻辑非!简单总结
!"" true!"aaa" false""==false true ...
- 20191114PHP验证码
<?phpob_clean();$img=imagecreate(40,20);$back=imagecolorallocate($img,200,200,200); $blue=imageco ...
- 四、局域网连接SqlServer
一.局域网连接SqlServer 一台服务器上装有四个数据库的时候,我们可以通过IP\实例名的方式进行访问. navicat 连接sqlserver数据库
- numpy知识点总结
一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于数组的对象,如列表等 反过来转换则可以使用numpy.ndarray.tolist()函数,如a. ...