1. 程式人生 > >批量檢查單選和多選按鈕是否選中

批量檢查單選和多選按鈕是否選中

html javscript jquery html5

在項目開發中,遇到這樣一個問題,網頁中有多組單選問題和復選項,甚至還有下拉列表或文本輸入框……除了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;
}

    _______________________________
    新手瞎折騰,大神見笑了~!歡迎指點更好的解決方法哦~!

批量檢查單選和多選按鈕是否選中