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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php实现文件预览功能
2017/05/23 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
浅谈webpack组织模块的原理
2018/03/10 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
numpy.array 操作使用简单总结
2019/11/08 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
品牌推广活动策划方案
2014/08/19 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android