jquery判断复选框是否选中进行答题提示特效


Posted in Javascript onDecember 10, 2015

本文实例讲述了jquery判断复选框是否选中进行答题提示特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery判断复选框是否选中进行答题提示特效

具体代码如下:

一、实现的原理:

第一步:判断用户选择哪一项,即哪个复选框被选中

第二步:根据复选框的选中情况给出相应的提示

二、下面来看主体程序:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="checkbox" id="checkbox01" />A <br />
    <input type="checkbox" id="checkbox02" />B <br />
    <input type="checkbox" id="checkbox03" />C <br />
    <input type="checkbox" id="checkbox04" />D <br />
    <input type="button" id="button" value="提交" />
    <h4 >提示本题是单选题且正确答案是A</h4>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

从上面也可以看出我假设这道题是单选题,且正确答案是A,那么接下来就开始用JQ实现了~~~

三、jQuery程序

$(function(){
  //假设正确答案是A
  $("#button").click(function(){
    if($("input").filter(":checked").length==0){
      alert("请选择一个选项再提交");
    }else if($("#checkbox01").filter(":checked").length!=0&&$("#checkbox02").filter(":checked").length==0&&$("#checkbox03").filter(":checked").length==0&&$("#checkbox04").filter(":checked").length==0){
      alert("您选择的答案是正确的!")
    }else{
      alert("您选择的答案是错误的!")
    }
  })
})

之前看了网上很多判断复选框被选中的程序,经过测试大多上都是无用的,估计是jquery版本更新祛除了很多程序导致的吧,谁知道呢,后来用$("#id").filter(":checked").length==0判断哪个选项被选中经过测试是可以的。

希望本文所述对大家学习jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
第一篇初识bootstrap
Jun 21 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
一道python走迷宫算法题
2018/01/22 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python实现定时发送qq消息
2019/01/18 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
学生个人自我鉴定范文
2014/03/28 职场文书
2014年党支部学习材料
2014/05/19 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
前台文员岗位职责
2015/02/04 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang