jquery判斷復(fù)選框是否選中進行答題提示特效

更新時間：2015年12月10日 08:40:31 作者：Sunshine_lily

這篇文章主要介紹了jquery判斷復(fù)選框是否選中進行答題提示特效，感興趣的小伙伴們可以參考一下

本文實例講述了jquery判斷復(fù)選框是否選中進行答題提示特效代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：

具體代碼如下：

一、實現(xiàn)的原理：

第一步：判斷用戶選擇哪一項，即哪個復(fù)選框被選中

第二步：根據(jù)復(fù)選框的選中情況給出相應(yīng)的提示

二、下面來看主體程序：

<!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>

從上面也可以看出我假設(shè)這道題是單選題，且正確答案是A，那么接下來就開始用JQ實現(xiàn)了~~~

三、jQuery程序

$(function(){
  //假設(shè)正確答案是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("您選擇的答案是錯誤的！")
    }
  })
})

之前看了網(wǎng)上很多判斷復(fù)選框被選中的程序，經(jīng)過測試大多上都是無用的，估計是jquery版本更新祛除了很多程序?qū)е碌陌?，誰知道呢，后來用$("#id").filter(":checked").length==0判斷哪個選項被選中經(jīng)過測試是可以的。

希望本文所述對大家學(xué)習(xí)jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery EasyUI ProgressBar進度條組件
這篇文章主要為大家詳細介紹了jQuery EasyUI ProgressBar進度條組件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery中的CSS-DOM操作
這篇文章介紹了jQuery中的CSS-DOM操作，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
jQuery關(guān)于導(dǎo)航條背景切換效果實現(xiàn)示例
導(dǎo)航條背景切換的效果，想必大家在瀏覽網(wǎng)頁時可能會碰到過，下面為大家介紹下使用jquery如何實現(xiàn)，具體思路及代碼如下，感興趣的朋友可以參考下
2013-09-09
一篇文章帶你了解jQuery動畫
本篇文章主要介紹了jQuery之動畫效果，詳細的介紹了各種動畫特效的用法，有需要的可以了解一下，希望能夠給你帶來幫助
2021-11-11
jquery實現(xiàn)的Accordion折疊面板效果代碼
這篇文章主要介紹了jquery實現(xiàn)的Accordion折疊面板效果代碼,通過jquery鼠標click事件操作頁面元素樣式動態(tài)變換實現(xiàn)手風(fēng)琴折疊效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jQuery Mobile頁面跳轉(zhuǎn)后未加載外部JS原因分析及解決
Web開發(fā)進行頁面跳轉(zhuǎn)時在pageB中引用的JS并未成功運行，針對這個問題本文給予了詳細的解決方法，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
2014 HTML5/CSS3熱門動畫特效TOP10
本文給大家總結(jié)了10款本站今年比較熱門的html5/css3的動畫特效，附上演示地址和下載地址，有需要的小伙伴對比著使用。
2014-12-12
為jQuery.Treeview添加右鍵菜單的實現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過JSON數(shù)據(jù)加載，有需要的朋友，可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。
2010-10-10
jquery實現(xiàn)用戶信息修改驗證輸入方法匯總
這篇文章主要介紹了jquery實現(xiàn)用戶信息修改驗證輸入方法,實例匯總了jquery常用的提交、驗證、判定、修改等相關(guān)技巧,非常實用,需要的朋友可以參考下
2015-07-07
jQuery插件實現(xiàn)文件上傳功能（支持拖拽）
這篇文章主要介紹了jQuery插件實現(xiàn)文件上傳功能，可支持拖拽文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06