博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
批量检查单选和多选按钮是否选中
阅读量:7120 次
发布时间:2019-06-28

本文共 2187 字,大约阅读时间需要 7 分钟。

在项目开发中,遇到这样一个问题,网页中有多组单选问题和复选项,甚至还有下拉列表或文本输入框……除了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;}    _______________________________    新手瞎折腾,大神见笑了~!欢迎指点更好的解决方法哦~!

转载于:https://blog.51cto.com/qicaiji/2115389

你可能感兴趣的文章
远程打开服务管理器
查看>>
使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
查看>>
提问的艺术(中文版)
查看>>
一只饥饿的老虎
查看>>
MagicalRecord使用中的注意事项
查看>>
开涛spring3(9.4) - Spring的事务 之 9.4 声明式事务
查看>>
Android Studio 运行出现 Multiple dex files define Landroid/support/annotation/AnimRes 解决方法...
查看>>
Sencha Touch xtype对应的class
查看>>
Java并发基础框架AbstractQueuedSynchronizer初探(ReentrantLock的实现分析)
查看>>
Beautifulsoup 和selenium 的查询
查看>>
第一次担任项目经理从零开始架构自己的网站(二) 需求文档定稿,开始建表,建库(转)...
查看>>
Ajax跨域访问XML数据的另一种方式——使用YQL查询语句
查看>>
试验如何通过审核Google AdSense——我跟谷歌ads杠上啦
查看>>
KBMMW 4.82.00 发布
查看>>
19、java内存分配 常量池详解
查看>>
WINRAR4.2破解方式或注册码
查看>>
hbase列表排序
查看>>
【程序员面试宝典】找规律
查看>>
网购时代,写在消费者权益保护的新篇章大企业
查看>>
功率W与dBm的对照表及关系(转)
查看>>