基于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改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
理解javascript对象继承
Apr 17 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
JavaScript实现原型封装轮播图
Dec 27 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/06 PHP
解析php中的escape函数
2013/06/29 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
PyQt5实现画布小程序
2020/05/30 Python
基于Python绘制个人足迹地图
2020/06/01 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
七年级地理教学计划
2015/01/22 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
公司酒会主持词
2015/07/02 职场文书
赞美教师的句子
2019/09/02 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
教你用python控制安卓手机
2021/05/13 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL