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 相关文章推荐
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
jquery json 实例代码
2010/12/02 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
python写的ARP攻击代码实例
2014/06/04 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
深入了解Django中间件及其方法
2019/07/26 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
幼儿园秋游感想
2014/03/12 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书