检查所有单选按钮检查,然后移动到下一页
我想验证以检查是否所有的单选按钮都检查并移动到下一个分区。有五个单选按钮组。当我点击提交按钮验证五个单选按钮组,检查是否点击与否检查所有单选按钮检查,然后移动到下一页
HTML文件:
<div class="RatContent animated slideInRight" id="question1">
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col next">
<button type="submit" class="right">
<i style="color:black;" ng-click="openCity(event, 'question2' , 'question1')" class="ionicons ion-arrow-right-c"></i>
</button>
</div>
</div>
<!-- End content-->
</div>
js文件:
$scope.openCity = function(evt, cityName , Currentdiv) {
var i, x;
x = document.getElementsByClassName("RatContent");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var flag=0;
$("#"+Currentdiv).find("input[type='radio']").each(function(){
if($("input[type='radio']").is(':checked') == true){
flag=1;
return false;
}
});
alert(flag);
if(flag==0){
document.getElementById(cityName).style.display = "block";
}
else{
alert("sfsdf");
}
}
我不能完全肯定,如果这是你在想什么,但看看:http://codepen.io/Knollo/pen/EgXLaW
为了简单起见,我已经修改你的DOM有点。
HTML
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o">ok</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<button onclick="validateGroups()">submit</button>
CSS(SCSS)
.question {
margin: 10px 0;
padding: 20px 0;
border-bottom: 1px solid black;
&__title {
font-weigth: bold;
color: red;
margin: 0 0 10px;
}
}
的Javascript
function validateGroups() {
$questions = $('.question');
$answeredQuestions = $questions.filter(checkForValidAnswer);
if ($answeredQuestions.length != $questions.length) {
alert('not all questions have been answered, yet.');
} else {
alert('all questions answered. proceeding...');
}
}
function checkForValidAnswer($index, question) {
// get all answers
$answers = $(question).find('.question__answer');
// try to find a checked answer
$selectedAnswer = $answers.find('input:checked');
// return false if no checked answer was found
if ($selectedAnswer.length < 1)
return false;
// true, otherwise
return true;
}
谢谢我希望存储阵列中15个广播组的所有选中值和控制台数组 –
但是当我点击最后一个提交按钮时,最后5只有单选按钮...多数民众赞成在错误请给我一个答案 –
不知道你想说什么。 15个广播组?也许你的意思是15个单选按钮?请将我的笔拨到codepen上,进行更改并在此处发布链接以帮助说明您的新问题。 –
您正在使用的角度JS库,但不使用NG-重复指令。建立一个数组,其是具有无线电结构例如:
$scope.myArray = [
{
"header" : "First",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
},
{
"header" : "Second",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
}
]
在HTML创建行和收音机与NG-重复:
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;" ng-repeat="data in myArray">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>{{data.header}}</h5>
</div>
</div>
</div>
<div class="col" ng-repeat="myRadio in data.radios">
<div class="row">
<div class="col">
<input type="radio" name="emotion" ng.model="myRadio" id="myRadio.id" class="input-hidden" required />
<label for="myRadio.id">
<i class="fa {{myRadio.icon}}"></i>
</label>
</div>
</div>
</div>
</div>
'$( “#” + Currentdiv).find(“输入[类型= '无线电']:否(:选中)“。)length'? – Dimava
if($(“input [type ='radio']”)。is(':checked')== true)'be'if($(this).is(':checked') == true)' – Akshay
第一条评论代码不能正常显示那条线上的错误 –