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 相关文章推荐
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python+Wordpress制作小说站
2017/04/14 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python实现的端口扫描功能示例
2018/04/08 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python批量获取html内body内容的实例
2019/01/02 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
初婚未育未抱养证明
2014/01/12 职场文书
四年级数学教学反思
2016/02/16 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers