基于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中nextUntil()方法用法实例
Jan 07 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP pear安装配置教程
2016/05/14 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
js获取class的所有元素
2013/03/28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
对比分析json及XML
2014/11/28 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中分数的相关使用教程
2015/03/30 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python字典一键多值实例代码分享
2019/06/14 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
python wsgiref源码解析
2021/02/06 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
开学典礼演讲稿
2014/05/23 职场文书
获奖感言一句话
2015/07/31 职场文书
七年级作文之环保作文
2019/10/17 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript