在項目開發中,遇到這樣一個問題,網頁中有多組單選問題和複選項,甚至還有下拉列表或文本輸入框……除了text文本輸入框能夠給它添加required屬性外以外,其餘都不能用html自帶的屬性來實現必選的功能。因而從網上搜索了相關的檢測方法,大體方式都是這樣:
var radio = document.getElementsByName("question");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
alert(radio[i].value)
}
}
可是這只是針對一組單選問題的解決辦法,當有多組單選問題的時候,就沒法保證每一個問題都能被檢測到已被選中。由於個人頁面是這樣的結構:
<div>
單選問題1:
<input type="radio" name="question1" value="1" />
<input type="radio" name="question1" value="2" />
<input type="radio" name="question1" value="3" />
<input type="radio" name="question1" value="4" />
</div>
<div>
多選問題N:
<input type="checkbox" name="questionN[]" value="1" />
<input type="checkbox" name="questionN[]" value="2" />
<input type="checkbox" name="questionN[]" value="3" />
<input type="checkbox" name="questionN[]" value="4" />
</div>
因此,網上搜索的方法貌似都不能解決個人具體問題,經過本身思考,最初相處了一個簡單的方法,大概思路是這樣的:
首先檢測頁面有多少組問題(假設總數爲 N),而後經過用戶每次click事件,給某個變量(假設爲 M)累加1,固然,這個click只能累加第一次點擊,第二次點擊就再也不累加了,jquery有one函數解決哈。而後當用戶提交的時候,對比 N 與 M 是否相等,若是不等,則表示沒有完成。實現代碼以下:
do_qid = 0;//記錄作題次數
//經過點擊具體試題的選項,記錄作題次數
$('div.choice_body').one('click',function(){
do_qid++;
});html
$('form').on('submit',function(){ var num = $('div.high_light').length;//總數 if(num > do_qid){ alert('你好像沒作完,再去檢查下吧!'); return false; }else{ return true; } }); 也許這個算是「耍小聰明」吧,但的確可以解決檢測的困難,但若是用戶並無經過鼠標點擊選擇問題的選項,而是經過鍵盤完成的,那麼就會出現「明明作完了,網頁仍然提示沒完成」的錯誤判斷。 雖然,這個只是個小瑕疵,臨時用它來解決了個人項目問題。但我仍是但願可以完全解決它。也許這個問題對於大牛來講根本不是問題,但個人確花了一整晚來思考它,最後終於解決了,實現代碼以下: $('form').on('submit',function(){ if(submit_check()){ $('input[type="submit"]').addClass('disabled').val('正在提交,請等待...'); return true; }else{ alert('你好像沒作完,再去檢查下吧!'); return false; } }); function submit_check(){ $.each($('.choice_body'),function(index,fn){ var type = $(fn).find('input').attr('type'); if(type == 'radio' || type == 'checkbox'){ var input_val = $(fn).find('input:checked').val(); if(input_val){ console.log(index,input_val); }else{ return false; } } }); return true; } _______________________________ 新手瞎折騰,大神見笑了~!歡迎指點更好的解決方法哦~!