如何制作一个循环和循环遍历不同单选按钮组的 if 语句 (javascript)

how to make a loop and if statement that loops through a different groups of radio buttons (javascript)

**HTML**
<li class="option">
            <input type="radio" name="Answer1" value="A">A</input><br>

            <input type="radio" name="Answer1" value="B">B</input><br>

            <input type="radio" name="Answer1" value="C">C</input><br>

            <input type="radio" name="Answer1" value="D">D</input><br>
        </li>

<li class="option">
            <input type="radio" name="Answer2" value="A">A</input><br>

            <input type="radio" name="Answer2" value="B">B</input><br>

            <input type="radio" name="Answer2" value="C">C</input><br>

            <input type="radio" name="Answer2" value="D">D</input><br>
        </li>

<li class="option">
            <input type="radio" name="Answer3" value="A">A</input><br>

            <input type="radio" name="Answer3" value="B">B</input><br>

            <input type="radio" name="Answer3" value="C">C</input><br>

            <input type="radio" name="Answer3" value="D">D</input><br>

我正在创建在线调查。在调查结束时有一个提交按钮,它将收到 "Please answer all questions" 或 "Submitted" 的警报。使用哪种警报取决于用户是否回答了所有问题。我不确定如何创建此循环。请帮忙

这里,take a look at this demo boootply。由于您使用的是 Bootstrap,jQuery 应该已经是您页面的一部分。这是相关代码:

$(document).ready(function(){
  $('#submitBtn').click(function(e){
    e.preventDefault();
    if($('li.option :radio:checked').length == $('li.option').length){
        // enter code here to submit your form
        alert('submitted');
    }else{
        alert('Please answer all questions');
    }
  });
});

并将HTML更正为:

<ul class="list-unstyled">
    <li class="option">
        <label>
            <input type="radio" name="Answer1" value="A">A
        </label>
        <br>
        <label>
            <input type="radio" name="Answer1" value="B">B
        </label>

等..

为了以防万一,这里是 bootstrap/jQuery 文件的 link 标记:

<!-- Latest compiled and minified jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>