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

最新推荐文章于 2023-10-25 10:22:14 发布

山鹰的天空

最新推荐文章于 2023-10-25 10:22:14 发布

阅读量886

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/LanSeTianKong12/article/details/50259993

版权

jquery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、实现的原理：

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

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

二、下面来看主体程序：

 
         <!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( 
         "您选择的答案是错误的！" 
         ) 
        
 
         } 
        
 
         }) 
        
 
         } 
        