MySQL降龙十八掌,第六掌内容:利涉大川之MySQL索引的使用与优化(附含MySQL8.0隐藏索引),了解详情>>
0

我的帖子

个人中心

设置

  发新话题
    在项目开发中,遇到这样一个问题,网页中有多组单选问题和复选项,甚至还有下拉列表或文本输入框……除了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;
    }





本帖最后由 七彩极 于 2018-5-11 20:57 编辑
新手瞎折腾,大神见笑了~!欢迎指点更好的解决方法哦~!



宝剑厉不厉害,要看它的主人是谁,不信来PHP版块看看~!
威武霸气



Microsoft Office Servers and Services MVP
个人博客:http://blog.51cto.com/itsoul
QQ交流群:747369693
问题解决与否,欢迎大家反馈一下,也是对回答者认可&肯定,谢谢!
‹‹ 上一贴:【经验教程】当网站性能遭遇瓶颈的时候 ...   |   下一贴:【已解决】php怎样实现显示服务器上的word和Excel文档 ... ››
  发新话题
快速回复主题
关于我们 | 诚聘英才 | 联系我们 | 网站大事 | 友情链接 |意见反馈 | 网站地图
Copyright©2005-2018 51CTO.COM
本论坛言论纯属发布者个人意见,不代表51CTO网站立场!如有疑义,请与管理员联系:bbs@51cto.com