如何檢查此功能是否至少有一個單選按鈕被選中？

我正在用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

如何檢查此功能是否至少有一個單選按鈕被選中？

回答

相關問題