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脚本实现静态网页加密实例代码
Nov 05 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
JQuery学习总结【二】
Dec 01 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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实现把数组按指定的个数分隔
2014/02/17 PHP
php+highchats生成动态统计图
2014/05/21 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP合并静态文件详解
2014/11/14 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
javascript各种复制代码收集
2008/09/20 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
对Python实现累加函数的方法详解
2019/01/23 Python
PyQt5响应回车事件的方法
2019/06/25 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python 硬币兑换问题
2019/07/29 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
Ibatis如何调用存储过程
2015/05/15 面试题
幼儿园教师教育感言
2014/02/28 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
协议书格式模板
2016/03/24 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
mysql查看表结构的三种方法总结
2022/07/07 MySQL