基于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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python使用tkinter实现简单计算器
2018/01/30 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
selenium+python实现自动登录脚本
2018/04/22 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
大学生职业生涯设计书
2014/01/02 职场文书
文明社区申报材料
2014/08/21 职场文书
小学教师师德整改措施
2014/09/29 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
SQL SERVER中的流程控制语句
2022/05/25 SQL Server