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 函数调用规则
Sep 14 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python创建自己的加密货币的示例
2021/03/01 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
业务员岗位职责范本
2013/12/15 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
婚礼主持词
2014/03/13 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
怎样写离婚协议书
2015/01/26 职场文书