基于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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
日常收集整理的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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
window.open的功能全解析
2006/10/10 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
js实现照片墙功能实例
2015/02/05 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Python 中 Meta Classes详解
2016/02/13 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python是否适合网页编程详解
2019/10/04 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
高中军训第一天感言
2014/03/06 职场文书
大学生个人求职信例文
2014/07/07 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
从事会计工作年限证明
2015/06/23 职场文书
社区低保工作总结2015
2015/07/23 职场文书