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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
js格式化时间小结
Nov 03 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 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的引用详解
2015/02/22 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
使用python3构建文件传输的方法
2019/02/13 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python实现udp传输图片功能
2020/03/20 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
二年级学生期末评语
2014/12/26 职场文书
小学副班长竞选稿
2015/11/21 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
2022年四月新番
2022/03/15 日漫
OpenCV实现常见的四种图像几何变换
2022/04/01 Python