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去除空格的几种方法
Oct 03 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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/11/27 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python简单猜数游戏实例
2015/07/09 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
电视节目策划方案
2014/05/16 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL