选中所有单选按钮，然后转到下一页

时间：2016-09-28 14:07:37

标签： javascript jquery angularjs

我想验证是否检查所有单选按钮是否已移至下一个分区。有五个单选按钮组。当我单击提交按钮验证五个单选按钮组以检查是否单击

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

2 个答案:

答案 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;
}

答案 1 :(得分：0)

您正在使用angular js库但不使用ng-repeat指令。创建一个具有无线电结构示例的数组：

$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>
相关问题
最新问题