您现在的位置是：首页 > jq记录jq记录
JQ判断选择题前端验证，没有选的提示并且跳到没选的位置
蒙xs2020-08-21【jq记录】人已围观
简介下面是DOM可以直接用
<!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()是我在其他地方找的,一个判断值是否重复的方法.
console.log(arrtrue)
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").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>
<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()是我在其他地方找的,一个判断值是否重复的方法.
console.log(arrtrue)
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").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>
Tags：
很赞哦！ ()
上一篇：js随机数
下一篇：js 关闭，刷新，离开浏览器检测
随机图文
移动端开发rem模式开发
1，通过js来改变html的根目录字体大小来动态改变界面的字体大小来自适应，2，最好放在全局变量里面，让整个页面都共用，3，每个盒子里面要设置字体大小不然变大屏幕字体会看不见，原生js
如何判断input输入框是否为空
js判断是手机端还是pc端
<script>if (~navigator.userAgent.indexOf('Mobile')) {$(".fnavlist").append("<li>"+"我是手机端"+"</li>")} else {$(".fnavlist").append("<li>"+"我是电脑端"
通过input来写点赞爱心颜色
1，这个方法是通过input来关联label的样式2，input要隐藏,label显示，点击label时input被选中，label添加动画改变样式3，背景图的定位要正确4，代码css代码<style type="text/css">.app
文章评论
猜你喜欢
