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中callee与caller的用法和应用场景
Dec 08 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
jquery实现轮播图效果
Feb 13 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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下对数组进行排序的函数
2010/08/08 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
js中作用域的实例解析
2017/03/16 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
在Python中使用正则表达式的方法
2015/08/13 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python线程里哪种模块比较适合
2020/08/02 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
家居设计专业个人自荐信范文
2013/11/26 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
企业新年寄语
2014/04/04 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
商场收银员岗位职责
2015/04/07 职场文书
信用卡工作证明范本
2015/06/19 职场文书
祝寿主持词
2015/07/02 职场文书