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插件开发的一些感想和心得
Feb 04 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
详解javascript设计模式三:代理模式
Mar 25 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
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python入门篇之面向对象
2014/10/20 Python
python黑魔法之参数传递
2016/02/12 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python如何生成网页验证码
2018/07/28 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
五水共治一句话承诺
2014/05/30 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
高中同学会活动方案
2014/08/14 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang