基于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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php命名空间学习详解
2014/02/27 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
对教师的评语
2014/04/28 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
考研英语复习计划
2015/01/19 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Python多线程 Queue 模块常见用法
2021/07/04 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android