Aktivieren Sie das Optionsfeld, und gehen Sie dann zur nächsten Seite.

Question

Ich möchte validieren, um zu prüfen, ob alle Optionsfelder markiert sind, und zur nächsten Unterteilung wechseln. Es gibt fünf Optionsfeldgruppen. Wenn ich einreichen geklickt Taste bestätigen, dass fünf Optionsfeld Gruppen, ob angeklickt überprüfen oder

nicht

HTML FILE:

<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-Datei:

$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

Ich bin nicht ganz sicher, ob dies Was Sie vorhatten, aber überprüfen Sie es heraus: http://codepen.io/Knollo/pen/EgXLaW

Der Einfachheit halber habe ich Ihr DOM etwas geändert.

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

Du Winkel js Bibliothek aber nicht ng-Repeat-Direktive. Erstellen Sie ein Array, das Beispiel Funk Struktur ist:

$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" 
     } 

     ] 
    } 
] 

in Ihrem HTML erstellen Zeilen und Radios mit ng-repeat:

<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>