jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效
本文實(shí)例講述了jquery判斷復(fù)選框是否選中進(jìn)行答題提示特效代碼。分享給大家供大家參考。具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
一、實(shí)現(xiàn)的原理:
第一步:判斷用戶選擇哪一項(xiàng),即哪個(gè)復(fù)選框被選中
第二步:根據(jù)復(fù)選框的選中情況給出相應(yīng)的提示
二、下面來(lái)看主體程序:
<!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,那么接下來(lái)就開始用JQ實(shí)現(xiàn)了~~~
三、jQuery程序
$(function(){ //假設(shè)正確答案是A $("#button").click(function(){ if($("input").filter(":checked").length==0){ alert("請(qǐng)選擇一個(gè)選項(xiàng)再提交"); }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("您選擇的答案是錯(cuò)誤的!") } }) })
之前看了網(wǎng)上很多判斷復(fù)選框被選中的程序,經(jīng)過測(cè)試大多上都是無(wú)用的,估計(jì)是jquery版本更新祛除了很多程序?qū)е碌陌?,誰(shuí)知道呢,后來(lái)用$("#id").filter(":checked").length==0判斷哪個(gè)選項(xiàng)被選中經(jīng)過測(cè)試是可以的。
希望本文所述對(duì)大家學(xué)習(xí)jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery 獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)滾動(dòng)事件的監(jiān)聽、響應(yīng)及數(shù)據(jù)加載相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jQuery EasyUI實(shí)現(xiàn)右鍵菜單變灰不可用效果
用jQuery實(shí)現(xiàn)了三種情況下的變灰不可用的效果,當(dāng)鼠標(biāo)放到上面點(diǎn)擊,右鍵菜單就會(huì)消失,其實(shí)解決的辦法也很簡(jiǎn)單,只要在對(duì)應(yīng)的單擊事件里重新綁定右鍵菜單即可,需要的朋友可以參考下2015-09-09jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳的相關(guān)資料,需要的朋友可以參考下2016-05-05jQuery源碼分析之jQuery中的循環(huán)技巧詳解
這篇文章主要介紹了jQuery源碼中的循環(huán)技巧,包括各類選擇、判斷、遍歷等等操作,非常實(shí)用的技巧,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-07基于jquery的下拉框改變動(dòng)態(tài)添加和刪除表格實(shí)現(xiàn)代碼
以前很少用jquery,現(xiàn)在工作需要,用上了,感覺真的很方便!不用再像以前那樣寫那么多多余的Js了!看來(lái)得在jquery上花點(diǎn)功夫呢!2011-03-03jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換
本篇文章主要是對(duì)使用jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換的示例代碼進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jquery快捷動(dòng)態(tài)綁定鍵盤事件的操作函數(shù)代碼
動(dòng)態(tài)綁定鍵盤事件的方法或許會(huì)有很多,在本文將為大家介紹下jquery是如何快捷實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-10-10