基于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 相关文章推荐
extjs render 用法介绍
Sep 11 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
js中this的用法实例分析
Jan 10 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
JS实现可控制的进度条
Mar 25 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
日常收集整理的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
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Django自定义分页效果
2017/06/27 Python
python3实现微型的web服务器
2019/09/03 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python 读取位于包中的数据文件
2020/08/07 Python
python 如何快速复制序列
2020/09/07 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
益模软件Java笔试题
2012/03/27 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
初中学校对照检查材料
2014/08/19 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
工程质检员岗位职责
2015/04/08 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
HTML基本元素标签介绍
2022/02/28 HTML / CSS