基于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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
vue.js中created方法作用
2018/03/30 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
pandas 选择某几列的方法
2018/07/03 Python
pytorch 数据集图片显示方法
2018/07/26 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python使用python-docx读写word文档
2019/08/26 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
电子商务求职信
2014/06/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
会议接待欢迎标语
2014/10/08 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Mysql开启外网访问
2022/05/15 MySQL