すべてのラジオボタンをチェックして次のページに移動します

Question

すべてのラジオボタンがオンになっているかどうかを確認し、次の部門に移動するかどうかを確認します。 5つのラジオボタングループがあります。

<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

私は、これがあれば、完全にわからないんだけど、私が提出クリックしたときにボタンが5つのラジオボタングループがクリックされたかどうかを確認するか

HTMLファイルにすることを検証しますあなたが念頭に置いていましたが、それをチェックアウトしてください：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-繰り返しディレクティブを使用していません。 NG-繰り返しで行とラジオを作成し、あなたのHTML内

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

     ] 
    } 
] 

：ラジオ構造の例を持っている配列を作成します

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