基于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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
php一个找二层目录的小东东
2012/08/02 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
初识PHP
2014/09/28 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
老师对学生的寄语
2014/04/09 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
教师节校长致辞
2015/07/31 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Python Django搭建文件下载服务器的实现
2021/05/10 Python