您好,登錄后才能下訂單哦!
在項目開發中,遇到這樣一個問題,網頁中有多組單選問題和復選項,甚至還有下拉列表或文本輸入框……除了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++;
});
$('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;
}
_______________________________
新手瞎折騰,大神見笑了~!歡迎指點更好的解決方法哦~!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。