javascript - 当用户点击下一页时，不确定如何动态检查所有位于一页的单选按钮

Question

我正在进行一个项目，正在为网站上的用户进行调查。用户可以单击“后退”按钮，将他带到上一个问题，也可以单击“下一个”按钮，将他带到下一个问题。

所有这些问题都在同一个父 div 中，并分为各自的 div。所以它们都在同一页面中。我为父 div 中的每个问题 div 赋予隐藏和显示属性，以便根据用户单击下一步和返回来显示相关问题。因此，如果用户单击“下一步”，我将隐藏当前问题 div 并显示下一个问题 div。当用户单击后退按钮时反之亦然。

HTML

<div class="question-box">

<div class="progress-bar">

<h3 id="percent">7%</h3>

</div>

<div id="one" class="question">
<p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
<p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off"" name="q0" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q0" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q0" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q0" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q0" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q0" value="5"></li>
</ul>

</div>
</div>

<div id="two" class="question">
<p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
<p>How much did you enjoy the film/event you watched?</p>
<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q1" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q1" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q1" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q1" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q1" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q1" value="5"></li>
</ul>

</div>
</div>

<div id="three" class="question">
<p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
<p>Overall, how helpful were the Classic Screenings staff?</p>
<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q2" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q2" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q2" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q2" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q2" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q2" value="5"></li>
</ul>

</div>
</div>

<div id="four" class="question">
<p>Did you purchase any food / snacks from the cinema?</p>
<div class="yesOrNo">
Yes<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="yes">
No<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="no">
</div>
<div id="food-followUp">
<p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
<p>What do you rate the quality of the food / snacks?</p>
<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q3" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q3" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q3" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q3" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q3" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q3" value="5"></li>
</ul>
</div>
</div>
</div>

<div id="five" class="question">
<p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
<div class="yesOrNo">
Yes<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="yes">
No<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="no">
</div>
<div id="facilities-followUp">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>Cleanliness of the toilet facilities</p>

<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q4" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q4" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q4" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q4" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q4" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q4" value="5"></li>
</ul>

</div>
</div>


</div>

<div id="six" class="question">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>

<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q5" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q5" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q5" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q5" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q5" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q5" value="5"></li>
</ul>

</div>
</div>

<div id="seven" class="question">
<p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
<p>My allocated seat was in great condition</p>

<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q6" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q6" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q6" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q6" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q6" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q6" value="5"></li>
</ul>

</div>

<p>The area around my seat was clean and tidy</p>

<div class="answer">

<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q7" value="0"></li>
</ul>

<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q7" value="1"></li>
</ul>

<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q7" value="2"></li>
</ul>

<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q7" value="3"></li>
</ul>

<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q7" value="4"></li>
</ul>

<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q7" value="5"></li>
</ul>

</div>

</div>

<div id="eight" class="question">
<p>Were there any disruptions that occured during the viewing of you movie / event?</p>
<div class="yesOrNo">
Yes<input class="yorn" autocomplete="off" type="radio" name="yorn" value="yes">
No<input class="yorn" autocomplete="off" type="radio" name="yorn" value="no">
</div>

<p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
<textarea></textarea>

</div>

<div id="nine" class="question">

<h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>

<p>We are very grateful towards you taking the time out to complete this survery.</p>

<p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>

<p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>

</div>




</div>

<div class="navigate">

<div id="backBtn" class="back questionchoice">

<h2>BACK</h2>

</div>

<div id="nextBtn" class="next questionchoice">

<h2>NEXT</h2>

</div>

</div>


</div>

js:

$(document).ready(function(){

        var facilityQ = document.querySelectorAll(".facilities");
        var foodChoice = document.querySelectorAll(".snacks");
        var backBtn = document.getElementById("backBtn");
        var nextBtn = document.getElementById("nextBtn");
        var questions = ["one","two","three","four","five","six","seven","eight","nine"];
        currentQuestion = 0;

            //scrolling to next question




            $(nextBtn).click(function(){

                currentQuestion++;

                if (currentQuestion == questions.length-1){
                    nextBtn.style.display = "none";
                    backBtn.style.display = "none";
                }

                if (currentQuestion >= 1){
                    backBtn.style.visibility = "visible";
                }

                if (currentQuestion < questions.length){
                    document.getElementById(questions[currentQuestion]).style.display = "block";
                    document.getElementById(questions[currentQuestion-1]).style.display = "none";
                }

            });


            $(foodChoice[0]).click(function(){
                $("#food-followUp").slideDown();
            })

            $(facilityQ[0]).click(function(){
                $("#facilities-followUp").slideDown();
            })

            // scrolling to previous question

             $(backBtn).click(function() {
                if (currentQuestion > 0) {
                  document.getElementById(questions[currentQuestion]).style.display = "none";
                  document.getElementById(questions[currentQuestion - 1]).style.display = "block";
                }

                currentQuestion--;

                if (currentQuestion === 0) {
                  backBtn.style.visibility = "hidden";
                }
              });

问题:

我偶然发现了一个问题，在以这种方式进行调查之前我什至没有想到这个问题。我真的很想拥有单页调查功能，但我正在努力想出一种解决方案来检查每个单选按钮问题，以确保用户在单击下一个按钮之前选择了一个问题。

有没有比较有经验的人可以帮助我吗？我一直在尝试寻找一种方法，但每当我认为我找到了一种方法时，就会引发另一个问题。

非常感谢您的时间、帮助和建议!

Answer 1

也许您可以将当前问题编号连接到元素名称，以便您可以检查是否选择了该特定的单选按钮组。

function getCheckedValue( groupName ) {
    var radios = document.getElementsByName( groupName );
    for( i = 0; i < radios.length; i++ ) {
        if( radios[i].checked ) {
            return radios[i].value;
        }
    }
    return false;
}

if ( getCheckedValue( "q" + currentQuestion ) ) {
    // there is a radio button selected, proceed
} else {
    // ask the user to select a radio button
}

(如何检查单选按钮是否已选中，来自此处 In JavaScript, how can I get all radio buttons in the page with a given name? )

希望对你有帮助