如何检查此功能是否至少有一个单选按钮被选中？

我正在用PHP进行测验，但是我先使用JavaScript来解决问题，然后提交表单并让PHP完成剩下的工作。如何检查此功能是否至少有一个单选按钮被选中？

我做了两个JavaScript函数，称为ChangeQuestion()和BackQuestion()。

function ChangeQuestion(prev, next) { 
    $('#' + prev).fadeOut(600, function() { 
     $('#' + next).fadeIn(600); 
    }); 
} 

function BackQuestion(last, prev) { 
    $('#' + prev).fadeOut(600, function() { 
     $('#' + last).fadeIn(600); 
    }); 
}

它们很基本。但是我想要做的是在继续使用这个函数之前，检查它们是否至少有一个单选按钮被选中。你将能够看到我的标记/ HTML如何使用上述功能。

首先，这里有一个的jsfiddle：http://jsfiddle.net/3XdUA/

这里是我的标记：

<form id="quiz1" name="quiz1" method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> 
    <div id="starter"> 
     Hello! Welcome to the HTML Quiz powered by PHP. Click on Start to begin. 
     <br /><br /> 
     <button type="button" onclick="ChangeQuestion('starter','question1');$('#qIndicator').fadeIn(800);">Start &raquo;</button> 
    </div> 
    <div id="question1" style="display:none;"> 
     1. What does HTML stand for? 
     <br /> 
     <br /> 
     <input type="radio" name="q1" id="q1-a1" /> 
     <label for="q1-a1">Hyperlinks and Text Markup Language</label> 
     <br /> 
     <input type="radio" name="q1" id="q1-a2" /> 
     <label for="q1-a2">Home Text Markup Language</label> 
     <br /> 
     <input type="radio" name="q1" id="q1-a3" /> 
     <label for="q1-a3">Hyper Text Markup Language</label> 
     <br /> 
     <input type="radio" name="q1" id="q1-a4" /> 
     <label for="q1-a4">Hyper Text Marking Language</label> 
     <br /><br /> 
     <button type="button" onclick="ChangeQuestion('question1','question2');$('#qIndicator').html('Question 2 of 10');">Next &raquo;</button> 
    </div> 

    <div id="question2" style="display:none;"> 
     2. What is the proper way to add a blue background to the <code>&lt;body></code> and remove the margin &amp; padding? 
     <br /> 
     <br /> 
     <input type="radio" name="q2" id="q2-a1" /> 
     <label for="q2-a1">&lt;body backgroundColor="blue" padding="0" margin="0"&gt;</label> 
     <br /> 
     <input type="radio" name="q2" id="q2-a2" /> 
     <label for="q2-a2">&lt;body style="background-color: blue; margin: 0; padding: 0;"&gt;</label> 
     <br /> 
     <input type="radio" name="q2" id="q2-a3" /> 
     <label for="q2-a3">&lt;body style="backgroundColor: blue; margin: 0px; padding: 0px;"&gt;</label> 
     <br /> 
     <input type="radio" name="q2" id="q2-a4" /> 
     <label for="q2-a4">&lt;body background="blue" padding="0" margins="0"&gt;</label> 
     <br /><br /> 
     <button type="button" onclick="BackQuestion('question1','question2');$('#qIndicator').html('Question 1 of 10');">&laquo; Back</button> 
     <button type="button" onclick="ChangeQuestion('question2','question3');$('#qIndicator').html('Question 3 of 10');">Next &raquo;</button> 
    </div> 

    <div id="question3" style="display:none;"> 
     3. Which of the following font styling tags isn&#39;t valid? 
     <br /> 
     <br /> 
     <input type="radio" name="q3" id="q3-a1" /> 
     <label for="q3-a1">&lt;small&gt;</label> 
     <br /> 
     <input type="radio" name="q3" id="q3-a2" /> 
     <label for="q3-a2">&lt;strong&gt;</label> 
     <br /> 
     <input type="radio" name="q3" id="q3-a3" /> 
     <label for="q3-a3">&lt;em&gt;</label> 
     <br /> 
     <input type="radio" name="q3" id="q3-a4" /> 
     <label for="q3-a4">&lt;large&gt;</label> 
     <br /><br /> 
     <button type="button" onclick="BackQuestion('question2','question3');$('#qIndicator').html('Question 2 of 10');">&laquo; Back</button> 
     <button type="button" onclick="ChangeQuestion('question3','question4');$('#qIndicator').html('Question 4 of 10');">Next &raquo;</button> 
    </div> 

    <div id="question4" style="display:none;"> 
     4. Suppose you have this HTML on your page: 
     <br /><br /> 
     <code> 
      &lt;a name="target4"&gt;Old listing&lt;/a&gt; 
     </code> 
     <br /><br /> 
     How would you link to the above target? 
      <br /> 
      <br /> 
      <input type="radio" name="q4" id="q4-a1" /> 
      <label for="q1-a1">&lt;a url="#target4"&gt;Check Old Listing as well&lt;/a&gt; </label> 
      <br /> 
      <input type="radio" name="q4" id="q4-a2" /> 
      <label for="q1-a2">&lt;a href="#target4"&gt;Check Old Listing as well&lt;/a&gt;</label> 
      <br /> 
      <input type="radio" name="q4" id="q4-a3" /> 
      <label for="q1-a3">&lt;link url="target4"&gt;Check Old Listing as well&lt;/link&gt; </label> 
      <br /> 
      <input type="radio" name="q4" id="q4-a4" /> 
      <label for="q1-a4">&lt;a href="Listing.target4"&gt;Check Old Listing as well&lt;/a&gt;</label> 
      <br /><br /> 
      <button type="button" onclick="BackQuestion('question3','question4');$('#qIndicator').html('Question 3 of 10');">&laquo; Back</button> 
      <button type="button" onclick="ChangeQuestion('question4','question5');$('#qIndicator').html('Question 5 of 10');">Next &raquo;</button> 
     </div> 

      <div id="question5" style="display:none;"> 
       5. What does HTML stand for? 
       <br /> 
       <br /> 
       <input type="radio" name="q2" id="q2-a1" /> 
       <label for="q1-a1">Hyper Tool Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a2" /> 
       <label for="q1-a2">Home Text Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a3" /> 
       <label for="q1-a3">Hyper Text Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a4" /> 
       <label for="q1-a4">Hyper Text Marking Language</label> 
       <br /><br /> 
       <button type="button" onclick="BackQuestion('question4','question5');$('#qIndicator').html('Question 4 of 10');">&laquo; Back</button> 
       <button type="button" onclick="ChangeQuestion('question5','question6');$('#qIndicator').html('Question 6 of 10');">Next &raquo;</button> 
      </div> 

      <div id="question6" style="display:none;"> 
       6. What does HTML stand for? 
       <br /> 
       <br /> 
       <input type="radio" name="q2" id="q2-a1" /> 
       <label for="q1-a1">Hyper Tool Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a2" /> 
       <label for="q1-a2">Home Text Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a3" /> 
       <label for="q1-a3">Hyper Text Markup Language</label> 
       <br /> 
       <input type="radio" name="q2" id="q2-a4" /> 
       <label for="q1-a4">Hyper Text Marking Language</label> 
       <br /><br /> 
       <button type="button" onclick="BackQuestion('question5','question6');$('#qIndicator').html('Question 5 of 10');">&laquo; Back</button> 
       <button type="button" onclick="ChangeQuestion('question6','question7');$('#qIndicator').html('Question 7 of 10');">Next &raquo;</button> 
      </div> 

     </form>

是的，这是很长。对于那个很抱歉。但是，我提供了一个更容易理解的jsFiddle。（因为预览等）

我确实知道如何检查收音机是否被选中，但我不知道如何确保使用此功能的。

来源

2011-10-01 Nathan

使用:checked伪选择器。

function ChangeQuestion(prev, next) { 
    var prevQ = $('#'+prev); 
    var numChecked = prevQ.find('input[type=radio]:checked').length; 

    if(prev !=='starter' && numChecked == 0) { 
     // no radio checked in this question 
     return; 
    } 

    prevQ.fadeOut(600, function() { 
     $('#' + next).fadeIn(600); 
    }); 
}

来源

2011-10-01 03:31:40 Lee

哇！非常感谢你:)这正是我所需要的。 – Nathan

我只有一个小问题。因为我把'$（'＃qIndicator'）。html（'问题＃10'）;'在onclick中，例如，它仍然会提出“问题2/10”，即使函数使它们保持在问题1选择一个答案。有想法该怎么解决这个吗？ – Nathan

我想出了那一部分。我只是把它放在函数中，并添加了一些额外的if语句。 – Nathan

使用:radio:checked

function ChangeQuestion(prev, next) { 
    var current = $('#' + prev); 
    var selection = current.find(":radio:checked").attr("id"); 
    if (selection) { 
     alert(selection); 
    } 
    current.fadeOut(600, function() { 
     $('#' + next).fadeIn(600); 
    }); 
}

我的更新替代将是

function ChangeQuestion(prev, next) { 
    var current = $('#' + prev); 
    if (prev != "starter") { 
     var selection = current.find(":radio:checked").attr("id"); 
     if (selection === undefined) { 
      alert("no selection"); 
     } else { 
      alert(selection); 
      current.fadeOut(600, function() { 
       $('#' + next).fadeIn(600); 
      }); 
     } 
    } else { 
     current.fadeOut(600, function() { 
      $('#' + next).fadeIn(600); 
     }); 
    } 
}

我只是不喜欢重复

current.fadeOut(600, function() { 
     $('#' + next).fadeIn(600); 
    });

see here

来源

2011-10-01 03:30:38 rlemon

谢谢！但是，如果没有选择任何东西，这并不会阻止它。 – Nathan

[更新]（http://jsfiddle.net/rlemon/3XdUA/19/）这是有点哈克，但我累了。 – rlemon

是的，我明白了，我也很累。谢谢。 – Nathan

您还可以使用$("[name=q1]").is(":checked")只是为了检查是否选择了某些东西。当然，你可以用任何一个问题替换q1。在你的情况下，它看起来像你会使用q1,q2等

来源

2011-10-01 03:33:11

每次都要搜索整个DOM。用'$（“＃”+ prev +“[name * = q1]：checked”）'会更好 – rlemon

如何检查此功能是否至少有一个单选按钮被选中？

回答

相关问题