基于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 研究心得 取得属性的值
Nov 30 Javascript
Javascript 继承实现例子
Aug 12 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
Node.js学习入门
Jan 03 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Javascript中window.name属性详解
Nov 19 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常用函数的使用汇总
2013/06/08 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python3获取url文件大小示例代码
2019/09/18 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
物流专业求职计划书
2014/01/10 职场文书
小学生家长寄语
2014/04/02 职场文书
财务管理专业自荐书
2014/09/02 职场文书
大学生实习证明
2015/06/16 职场文书
感恩教育主题班会
2015/08/12 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python