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 数组循环引起的思考
Jan 01 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
基于js实现数组相邻元素上移下移
May 19 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 常用类整理
2009/12/23 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
基于php无限分类的深入理解
2013/06/02 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
Java如何支持I18N?
2016/10/31 面试题
就业协议书的作用
2014/04/11 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年科室工作总结
2014/11/20 职场文书
质量保证书怎么写
2015/02/27 职场文书
公司员工辞职信范文
2015/05/12 职场文书
离婚起诉书范本
2015/05/18 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫