基于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 获取json数据实现代码
Apr 27 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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 Smarty 字符比较代码
2011/02/27 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
什么是Python中的匿名函数
2020/06/02 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
空指针到底是什么
2012/08/07 面试题
我的五年职业生涯规划
2014/01/23 职场文书
信息总监管理职责范本
2014/03/08 职场文书
进口业务员岗位职责
2014/04/06 职场文书
企业委托书范本
2014/09/13 职场文书
八项规定整改方案
2014/10/01 职场文书
体育活动总结
2015/02/04 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
创业计划书之农家乐
2019/10/09 职场文书