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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
原生js实现日期联动
Jan 12 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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 post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
使用python实现knn算法
2017/12/20 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python 获取等间隔的数组实例
2019/07/04 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
助残日活动总结
2014/08/27 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
售房协议书范本
2015/08/11 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android