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获取地址栏参数
Dec 22 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
Vuex简单入门
Apr 19 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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
无线电的诞生过程
2021/03/01 无线电
PHP初学者头疼问题总结
2006/07/08 PHP
php实现mysql数据库备份类
2008/03/20 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python选择排序算法实例总结
2015/07/01 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python 类之间的参数传递方式
2019/12/20 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
用python对excel查重
2020/12/07 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
我们的节日清明节活动总结
2014/04/30 职场文书
小学课外阅读总结
2014/07/09 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书