基于jQuery实现复选框是否选中进行答题提示

前端技术 2023/09/08 JavaScript

最近是在项目需求中遇到的功能点，根据用户选择的选项给出相应的提示，下面给出了测试程序的效果图，看看是不是很满意，如果大家觉得还不错，请继续查看全文。

一、实现的原理：

第一步：判断用户选择哪一项，即哪个复选框被选中

第二步：根据复选框的选中情况给出相应的提示

二、下面来看主体程序：

<!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实现复选框是否选中进行答题提示的相关资料，希望大家喜欢。

本文地址：https://www.stayed.cn/item/22367

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案