基于jQuery实现复选框是否选中进行答题提示


Posted in Javascript onDecember 10, 2015

最近是在项目需求中遇到的功能点,根据用户选择的选项给出相应的提示,下面给出了测试程序的效果图,看看是不是很满意,如果大家觉得还不错,请继续查看全文。

基于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("请选择一个选项再提交");
}elsif($("#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与vbscript数据共享
Jan 09 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 #Javascript
详解AngularJS中module模块的导入导出
Dec 10 #Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 #Javascript
Spring mvc 接收json对象
Dec 10 #Javascript
SpringMVC返回json数据的三种方式
Dec 10 #Javascript
js操作数组函数实例小结
Dec 10 #Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
浅谈MySQL中的触发器
2015/05/05 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python脚本替换指定行实现步骤
2017/07/11 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python进程池Pool应用实例分析
2019/11/27 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
2014年应届大学生自我评价
2014/01/09 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
行政副总岗位职责
2014/02/23 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫