javascript - 检查所有已选中的单选按钮，然后移至下一页

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

您正在使用 Angular js 库，但没有使用 ng-repeat 指令。创建一个具有 radio 结构的数组示例:

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