在項(xiàng)目開發(fā)中，遇到這樣一個(gè)問題，網(wǎng)頁中有多組單選問題和復(fù)選項(xiàng)，甚至還有下拉列表或文本輸入框……除了text文本輸入框可以給它添加required屬性外之外，其他都不能用html自帶的屬性來實(shí)現(xiàn)必選的功能。于是從網(wǎng)上搜索了相關(guān)的檢測方法，大致方式都是這樣：

var radio = document.getElementsByName("question");
for (i=0; i<radio.length; i++) {
if (radio[i].checked) {
alert(radio[i].value)
}
}
但是這只是針對一組單選問題的解決辦法，當(dāng)有多組單選問題的時(shí)候，就無法保證每個(gè)問題都能被檢測到已被選中。因?yàn)槲业捻撁媸沁@樣的結(jié)構(gòu)：
<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>
所以，網(wǎng)上搜索的方法貌似都不能解決我的具體問題，通過自己思考，最初相處了一個(gè)簡單的方法，大概思路是這樣的：
首先檢測頁面有多少組問題（假設(shè)總數(shù)為 N），然后通過用戶每次click事件，給某個(gè)變量（假設(shè)為 M）累加1，當(dāng)然，這個(gè)click只能累加第一次點(diǎn)擊，第二次點(diǎn)擊就不再累加了，jquery有one函數(shù)解決哈。然后當(dāng)用戶提交的時(shí)候，對比 N 與 M 是否相等，如果不等，則表示沒有完成。實(shí)現(xiàn)代碼如下：
do_qid = 0;//記錄做題次數(shù)
//通過點(diǎn)擊具體試題的選項(xiàng)，記錄做題次數(shù)
$('div.choice_body').one('click',function(){
do_qid++;
});

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供三水網(wǎng)站建設(shè)、三水做網(wǎng)站、三水網(wǎng)站設(shè)計(jì)、三水網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、三水企業(yè)網(wǎng)站模板建站服務(wù)，10年三水做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

$('form').on('submit',function(){
    var num = $('div.high_light').length;//總數(shù)
    if(num > do_qid){
        alert('你好像沒做完，再去檢查下吧！');
        return false;
    }else{
        return true;
    }

});
也許這個(gè)算是“耍小聰明”吧，但的確能夠解決檢測的困難，但如果用戶并沒有通過鼠標(biāo)點(diǎn)擊選擇問題的選項(xiàng)，而是通過鍵盤完成的，那么就會出現(xiàn)“明明做完了，網(wǎng)頁仍然提示沒完成”的錯誤判斷。
雖然，這個(gè)只是個(gè)小瑕疵，臨時(shí)用它來解決了我的項(xiàng)目問題。但我還是希望能夠徹底解決它。也許這個(gè)問題對于大牛來說根本不是問題，但我的確花了一整晚來思考它，最后終于解決了，實(shí)現(xiàn)代碼如下：
$('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;
}

    _______________________________
    新手瞎折騰，大神見笑了~！歡迎指點(diǎn)更好的解決方法哦~！

本文名稱：批量檢查單選和多選按鈕是否選中
文章URL：http://www.rwnh.cn/article6/psgiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App開發(fā)、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站排名、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)