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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jquery map方法使用示例
Apr 23 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
js如何打印object对象
Oct 16 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
详解微信UnionID作用
May 15 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 array操作10个小技巧分享
2011/06/23 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
移动端js图片查看器
2016/11/17 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JS判断数组那点事
2017/10/10 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
初步解析Python下的多进程编程
2015/04/28 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python函数返回不定数量的值方法
2019/01/22 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
英文版餐饮运营管理求职信
2013/11/06 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
学习十八大的心得体会
2014/09/01 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2014年个人年终总结
2015/03/09 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
离职信范文
2015/06/23 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript