基于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同步Import,同步调用外部js的方法
Jul 08 Javascript
Prototype中dom对象方法汇总
Sep 17 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python实现感知器
2017/12/19 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python编写打字训练小程序
2019/09/26 Python
python加载自定义词典实例
2019/12/06 Python
三个python爬虫项目实例代码
2019/12/28 Python
np.dot()函数的用法详解
2020/01/17 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
pytorch中index_select()的用法详解
2021/01/06 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
请介绍一下Ant
2016/07/22 面试题
企业员工薪酬方案
2014/06/04 职场文书
党支部活动策划方案
2014/08/18 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
muduo TcpServer模块源码分析
2022/04/26 Redis