检查所有单选按钮检查，然后移动到下一页

Question

我想验证以检查是否所有的单选按钮都检查并移动到下一个分区。有五个单选按钮组。当我点击提交按钮验证五个单选按钮组，检查是否点击与否

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"); 
    } 
} 

Answer 1

我不能完全肯定，如果这是你在想什么，但看看：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; 
} 

Answer 2

您正在使用的角度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>