判断当前单选题第几个没选中，弹出题号并且定位到那一题的高度

最新推荐文章于 2020-03-03 23:03:50 发布
最新推荐文章于 2020-03-03 23:03:50 发布
阅读量691 收藏 1
点赞数 1
分类专栏： Jquery 网页中用到过的效果 文章标签： radio for 去重
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bright2017/article/details/66970314
版权

之前做项目，有一个效果是页面当中有90道题，在最后提交的时候，你需要判断出第几题没有被选中，并且改变颜色，同时定位到当前那道题的高度。

做这个效果的思路明确就很简单了。

第一步：首先是两层循环，第一层用来循环整体，确认总共数量是多少，

                第二层循环用来找到那些被选中的值。找到被选中的值之后，把它们放到一个新建的数组当中。

第二步：拿到所有选中的值之后，接下来要做的事情就是每次点击提交的时候确认有没有相同的值在数组里面。如果没有，就说明没有选中。这里判断

时候重复用到的函数contains(arr, obj)下面有描述。

第三步：接下来就是收尾工作了。前面两步已经铺垫好了。接下来，只要找到当前没有被选中的那一项，获得他的index弹出提示框，并且获得当前元素

距离页面顶部的高度，将获取的高度赋予滚动条就可以了。

废话有点多，下面是源码。结构部分，我只写了30个问答题，之后可以根据自己的需要，不过建议还是循环一下吧，一个一个写真的很累。。。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>判断单选</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div class="one">
<div class="problem">
<span>1</span>
<span>问题1</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="1" name="01"/>是
</label>
<label>
<input type="radio" value="2" name="01"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>2</span>
<span>问题2</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="3" name="02"/>是
</label>
<label>
<input type="radio" value="4" name="02"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>3</span>
<span>问题3</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="03"/>是
</label>
<label>
<input type="radio" value="6" name="03"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>4</span>
<span>问题4</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="04"/>是
</label>
<label>
<input type="radio" value="6" name="04"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>5</span>
<span>问题5</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="05"/>是
</label>
<label>
<input type="radio" value="6" name="05"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>6</span>
<span>问题6</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="06"/>是
</label>
<label>
<input type="radio" value="6" name="06"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>7</span>
<span>问题7</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="07"/>是
</label>
<label>
<input type="radio" value="6" name="07"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>8</span>
<span>问题8</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="08"/>是
</label>
<label>
<input type="radio" value="6" name="08"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>9</span>
<span>问题9</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="09"/>是
</label>
<label>
<input type="radio" value="6" name="09"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>10</span>
<span>问题10</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="10"/>是
</label>
<label>
<input type="radio" value="6" name="10"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>11</span>
<span>问题11</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="11"/>是
</label>
<label>
<input type="radio" value="6" name="11"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>12</span>
<span>问题12</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="12"/>是
</label>
<label>
<input type="radio" value="6" name="12"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>13</span>
<span>问题13</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="13"/>是
</label>
<label>
<input type="radio" value="6" name="13"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>14</span>
<span>问题14</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="14"/>是
</label>
<label>
<input type="radio" value="6" name="14"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>15</span>
<span>问题15</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="15"/>是
</label>
<label>
<input type="radio" value="6" name="15"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>16</span>
<span>问题16</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="16"/>是
</label>
<label>
<input type="radio" value="6" name="16"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>17</span>
<span>问题17</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="17"/>是
</label>
<label>
<input type="radio" value="6" name="17"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>18</span>
<span>问题18</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="18"/>是
</label>
<label>
<input type="radio" value="6" name="18"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>19</span>
<span>问题19</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="19"/>是
</label>
<label>
<input type="radio" value="6" name="19"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>20</span>
<span>问题20</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="20"/>是
</label>
<label>
<input type="radio" value="6" name="20"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>21</span>
<span>问题21</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="21"/>是
</label>
<label>
<input type="radio" value="6" name="21"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>22</span>
<span>问题22</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="22"/>是
</label>
<label>
<input type="radio" value="6" name="22"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>23</span>
<span>问题23</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="23"/>是
</label>
<label>
<input type="radio" value="6" name="23"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>24</span>
<span>问题24</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="24"/>是
</label>
<label>
<input type="radio" value="6" name="24"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>25</span>
<span>问题25</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="25"/>是
</label>
<label>
<input type="radio" value="6" name="25"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>26</span>
<span>问题26</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="26"/>是
</label>
<label>
<input type="radio" value="6" name="26"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>27</span>
<span>问题27</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="27"/>是
</label>
<label>
<input type="radio" value="6" name="27"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>28</span>
<span>问题28</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="28"/>是
</label>
<label>
<input type="radio" value="6" name="28"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>29</span>
<span>问题29</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="29"/>是
</label>
<label>
<input type="radio" value="6" name="29"/>否
</label>
</div>
</div>
<div class="one">
<div class="problem">
<span>30</span>
<span>问题30</span>
</div>
<div class="answertop">
<label>
<input type="radio" value="5" name="30"/>是
</label>
<label>
<input type="radio" value="6" name="30"/>否
</label>
</div>
</div>
<input type="button" class="buttom" value="提交" />
    <script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
$(".buttom").click(function(){
check();
});
   function check(){
        $(".one").css("color","black");
        var aa=$(".one").length;
//      循环最外面的div,先确定数量
        for (var i = 0; i < aa; i++) {
            var inputs = $(".answertop").eq(i).children().children();
            var ss = inputs.length;
            var arr=[];
            for (j=0;j<ss;j++) {
                arr.push(inputs[j].checked);   
//              在循环外定义一个新的数组,将每次选中的值都储存起来
            }
            var arrtrue=contains(arr,true);
//          contains()是我在其他地方找的,一个判断值是否重复的方法.
            if(arrtrue==false){
                layer.open({
                    title: '系统提示'
                    , content: '当前第' + (i + 1) + '个没有填写。'
                    , area: '500px'
                    , shade: [0.3, '#999']
                });
                //获取当前所有的one
                var oneindex = $('.one').eq(i);
                oneindex.css("color","red");
                // 获得当前元素距离文档顶部的高赋予滚动条
                var offset = oneindex.offset().top;  
//              offset = Math.abs($('.one').eq(0).offset().top) + offset;
                $("html body").scrollTop(offset);
                return false;
            }
        }       
    }
//    这个函数用来判断值是否重复,两个参数,第一个是上面定义好的数组,第二个就是里面的值
    function contains(arr, obj) {
 var i = arr.length;
 while (i--) {
   if (arr[i] === obj) {
     return true;
   }
 }
 return false;
}
    $('.answertop label input').click(function(){
$('.one').css("color","black");
    });
</script>
</body>
</html>

Bright2017
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
单选框状态的判断，当你做选择题时，没选择任何答案不让做下一道题，就会遇到这种问题了！
路遥知马力
11-23 1620
网上资料基本没有啊，都是说的是单选框怎么使用，就是没有判断，自己写了一个 group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO
Android 一个类似考试单选题的内容.rar
07-30
一个类似考试单选题的内容.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
react 实现问卷调查（单选题目、多选题目）
baidu_41604826的博客
10-16 6332
问卷调查怎么写？ 前台的逻辑部分也就是在——单选和多选的实现以及存储上面 第一步：首先了解数据的基本类型、格式——大致如下（两个单选题目，一个多选题目）： state = { choose_data: [ { title_num:'1', id: 1, key...
html快速定位到表单没有填写的位置
Dean_kai的博客
02-03 2590
在开发过程中会遇到很多表单，但是有时候会忘记某个选项没有填写，需要快速定位到具体的某个选项，思路是给没有填写的选项加上一个id，然后利用锚点跳转到该位置。 js代码 $($('input[name="'+str+'"]').get(0)).parents('div.text-left').attr('id','AA'); $('a#MD span').trigger('click');
表单验证如何定位到未填的选项
weixin_30469895的博客
04-23 2848
　　我们在做数据提交的时候经常用到表单验证，如果遇到表单元素有没填的选项，一般都会禁止表单提交 　　如果表单需要验证的数据比较多，有些必填的字段为空 提交不了 但是没有定位到未填项的位置 导致用户懵逼 不知道为什么提交不了 　　这个时候，我们可以给未填的表单项加foucs() 　　例如上图的代码，这样光标就可以定位到未填项 转载于:https://www.cnblogs.com/le...
java+vue实现添加单选题、多选题到题库功能
08-26
主要为大家详细介绍了java+vue实现添加单选题、多选题到题库功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
计算机基础知识单选题及答案一.pdf
11-28
计算机基础知识单选题及答案一.pdf
计算机一级考试单选题(必从里面选题考).pdf
11-29
计算机一级考试单选题(必从里面选题考).pdf
建筑CAD第八章的计算单选题及答案.pdf
11-28
建筑CAD第八章的计算单选题及答案.pdf
JS判断下拉选择框未选，则弹出警告窗
qq_40618664的博客
08-31 1362
if (document.getElementsByName(“select”)[0].selectedIndex == 0) { alert(“请您选择分类”); }
JS----checked----checked选中和未选中的获取
热门推荐
直到世界的尽头
04-10 5万+
全选、全不选、反选功能html代码        篮球        足球        排球        网球        壁球        乒乓球        羽毛球                          JS代码function setVal(iNum){        var aForm = document.getElementById("myForm");
基于jQuery实现复选框是否选中进行答题提示
山鹰的专栏
12-11 867
 一、实现的原理： 第一步：判断用户选择哪一项，即哪个复选框被选中 第二步：根据复选框的选中情况给出相应的提示 二、下面来看主体程序： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17        "utf-8" />           
vue radio单选框，获取当前项（每一项）的value值
好巧的博客
12-24 3万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。本文使用了lable关联选中，如果不需要，直接将循环语句 v-for 写在 input标签上即可。注意：需使用 change 事件，不是 click 事件。注意：需使用 change 事件，不是 click 事件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
vue判断一个复选框的选中状态
weixin_43398820的博客
03-03 8867
vue判断一个复选框的选中状态 <body> <div id="app"> <input type="checkbox" @click = "select(event)"> {{checkedStatus}} </div> </body> <script> var app = new ...
请出一套Java的卷子，包含单选题、判断题、填空题、编程题
最新发布
05-27
好的，下面是一套Java的考试卷，包含单选题、判断题、填空题、编程题，共10道题目： 一、单选题（每题2分，共10分） 1. 下列哪个不是Java的基本数据类型？ A. int B. double C. boolean D. char 2. 下列哪个不是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值