jquery判断复选框是否选中进行答题提示特效

前端技术 2023/09/01 JavaScript

本文实例讲述了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(\"请选择一个选项再提交\");
    }else if($(\"#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/1765

转载请注明出处。

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

我的博客

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

我的标签

随笔档案