1. 首頁
  2. 問答
  3. 檢查所有單選按鈕檢查，然後移動到下一頁

檢查所有單選按鈕檢查，然後移動到下一頁

2016-09-28 71 views
1

我想驗證以檢查是否所有的單選按鈕都檢查並移動到下一個分區。有五個單選按鈕組。當我點擊提交按鈕驗證五個單選按鈕組，檢查是否點擊與否檢查所有單選按鈕檢查，然後移動到下一頁

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

來源

2016-09-28 varadharajan p.r Rajan

+0

'$（ 「＃」 + Currentdiv）.find（「輸入[類型= '無線電']：否（：選中）「。）length'？ – Dimava

+0

if（$（「input [type ='radio']」）。is（'：checked'）== true）'be'if（$（this）.is（'：checked'） == true）' – Akshay

+0

第一條評論代碼不能正常顯示那條線上的錯誤 –

回答

0

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

來源

2016-09-28 14:51:15

+0

謝謝我希望存儲陣列中15個廣播組的所有選中值和控制檯數組 –

+0

但是當我點擊最後一個提交按鈕時，最後5只有單選按鈕...多數民衆贊成在錯誤請給我一個答案 –

+0

不知道你想說什麼。 15個廣播組？也許你的意思是15個單選按鈕？請將我的筆撥到codepen上，進行更改並在此處發佈鏈接以幫助說明您的新問題。 –

0

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

來源

2016-09-28 15:06:10 hurricane

相關問題

 相關問題