基于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 应用技巧集合[推荐]
Aug 30 Javascript
JS 控件事件小结
Oct 31 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python简单实现enum功能的方法
2016/04/25 Python
《Python学习手册》学习总结
2018/01/17 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python多线程http压力测试脚本
2019/06/25 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python类中self参数用法详解
2020/02/13 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
文言文形式的学生求职信
2013/12/03 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
2014年老干部工作总结
2014/11/21 职场文书
个人简历求职信范文
2015/03/20 职场文书
一个都不能少观后感
2015/06/04 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书