javascript - Javascript 获取所有选定选项的结果

Question

我有这个测验应用程序的代码，我需要获取所选所有选项的所有列表，并且需要在最后显示最多选择的选项。就像大多数问题中选择选项 3 或大多数问题中选择选项 2..

这是fiddle

JS:

$(document).ready(function(){
answers = new Object();
$('.option').change(function(){
    var answer = ($(this).attr('value'))
    var question = ($(this).attr('name'))
    answers[question] = answer
})
var item1 = document.getElementById('questions');

var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
$($questions.get(currentQuestion)).fadeIn();
$('#next').click(function(){
    $($questions.get(currentQuestion)).fadeOut(function(){
        currentQuestion = currentQuestion + 1;
        if(currentQuestion == totalQuestions){
               var result = sum_values()
               //do stuff with the result
               alert(result);
        }else{
        $($questions.get(currentQuestion)).fadeIn();
        }
    });

});
});


function sum_values(){
var the_sum = 0;
for (questions in answers){
    the_sum = the_sum + parseInt(answers[question])
}
return the_sum
}

HTML:

<div>
    <h1>What Type of Date Are You? (Dude Edition)</h1>
</div>
<div class="questions">
    <p>1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?</p>
    <form class="options">
        <input class="option" type="radio" name="question1" value=4>You walk right up to her, strike up a conversation, and ask for her number<br>
        <input class="option" type="radio" name="question1" value=3>You wait a few days until you get the courage to go and talk to her<br>
        <input class="option" type="radio" name="question1" value=2>You tell one of your mutual friends that you like her<br>
        <input class="option" type="radio" name="question1" value=1>You wait for her to come to you</br>
    </form>
</div>
<div class="questions">
    <p>2. You guys decide to go out on a date. Where do you decide to take her?</p>
    <form class="options">
        <input class="option" type="radio" name="question2" value=4>You take her out for a short coffee and talk about life and relationships<br>
        <input class="option" type="radio" name="question2" value=3>You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style<br>
        <input class="option" type="radio" name="question2" value=2>You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above<br>
        <input class="option" type="radio" name="question2" value=1>You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves<br>
    </form>
</div>
<div class="questions">
    <p>3. You think you had a great first date. What do you do between now and your second date?</p>
    <form class="options">
        <input class="option" type="radio" name="question3" value=4>You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!<br>
        <input class="option" type="radio" name="question3" value=3>You send her a text telling her how much fun you had and can't wait for the next date.<br>
        <input class="option" type="radio" name="question3" value=2>In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is<br>
        <input class="option" type="radio" name="question3" value=1>In addition to doing above, you think about how lucky you are for finally finding an amazing girl. You hope to start a relationship ASAP<br>
    </form>
</div>
<div class="questions">
    <p>4. Crap! You just remembered you have a huge project due this Friday. This might be a problem. How many dates do you have this week?</p>
    <form>
        <input class="option" type="radio" name="question4" value=4>More than 5. You're going to have to cancel one of them.<br>
        <input class="option" type="radio" name="question4" value=3>You have a few dates in the pipeline, just testing the waters. You can still make the dates<br>
        <input class="option" type="radio" name="question4" value=2>You have one date because you're a one woman kind of guy<br>
        <input class="option" type="radio" name="question4" value=1>You have one date. You don't date much, in general.<br>
    </form>
</div>
<div class="questions">
    <p>5. Finally, how spontaneous are you?</p>
    <form>
        <input class="option" type="radio" name="question5" value=4>YOLO is your middle name. Your amusement > all else<br>
        <input class="option" type="radio" name="question5" value=3>You may not be the most wild or crazy person, but you are definitely down for good times<br>
        <input class="option" type="radio" name="question5" value=2>You like to have fun as much as the next guy, as long as things don't get too out of hand<br>
        <input class="option" type="radio" name="question5" value=1>I like to plan ahead, no matter what the situation, work or play<br>
    </form>
</div>
    <br>
    <input type="button" id='next' value="Next" onlick="sum_values()">

Answer 1

快速修复了一些问题，但说实话，这很丑陋。它没有考虑到可能存在平局，但您应该能够完善它:

$(document).ready(function () {
    answers = new Object();
    $('.option').change(function () {
        var answer = ($(this).attr('value'));
        var question = ($(this).attr('name'));
        answers[question] = answer;
      console.log(answers);
    })
    var item1 = document.getElementById('questions');

    var totalQuestions = $('.questions').size();
    var currentQuestion = 0;
    var $questions = $('.questions');
    $questions.hide();
    $($questions.get(currentQuestion)).fadeIn();
    $('#next').click(function () {      
      if ($('.option',$questions.get(currentQuestion)).is(':checked')) {
        $($questions.get(currentQuestion)).fadeOut(function () {
            currentQuestion = currentQuestion + 1;
            console.log(currentQuestion + ' ' + totalQuestions);
            if (currentQuestion == parseInt(totalQuestions)) {
                var result = sum_values();
                //do stuff with the result
                var most = most_answered();
                alert('result: ' + result + '\nTop answer: ' + most[1] + '\nNumber of times selected: ' + most[0]);
            } else {
                $($questions.get(currentQuestion)).fadeIn();
            }
        });
      } else {
        alert('no selection made');
      }
    });
});


function sum_values() {
    var the_sum = 0;
    for (var question in answers) {
        the_sum = the_sum + parseInt(answers[question])
    }
    return the_sum;
}

function most_answered() {
    console.log(answers);
    var ans = { 1: 0, 2: 0, 3: 0, 4: 0 };
    var optionVals = { 1: 4, 2: 3, 3: 2, 4: 1 }
    var topVal = 0;
    var topAns = '';
    for (var question in answers) {
        var val = parseInt(answers[question]);
        ans[val] += 1;
        if (ans[val] > topVal) {
          topVal = ans[val];
          topAns = 'option ' + optionVals[val];
        }
    }

    return [topVal,topAns];
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
     <h1>What Type of Date Are You? (Dude Edition)</h1>

</div>
<div class="questions">
    <p>1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?</p>
    <form class="options">
        <input class="option" type="radio" name="question1" value=4>You walk right up to her, strike up a conversation, and ask for her number
        <br>
        <input class="option" type="radio" name="question1" value=3>You wait a few days until you get the courage to go and talk to her
        <br>
        <input class="option" type="radio" name="question1" value=2>You tell one of your mutual friends that you like her
        <br>
        <input class="option" type="radio" name="question1" value=1>You wait for her to come to you</br>
    </form>
</div>
<div class="questions">
    <p>2. You guys decide to go out on a date. Where do you decide to take her?</p>
    <form class="options">
        <input class="option" type="radio" name="question2" value=4>You take her out for a short coffee and talk about life and relationships
        <br>
        <input class="option" type="radio" name="question2" value=3>You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style
        <br>
        <input class="option" type="radio" name="question2" value=2>You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above
        <br>
        <input class="option" type="radio" name="question2" value=1>You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves
        <br>
    </form>
</div>
<div class="questions">
    <p>3. You think you had a great first date. What do you do between now and your second date?</p>
    <form class="options">
        <input class="option" type="radio" name="question3" value=4>You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!
        <br>
        <input class="option" type="radio" name="question3" value=3>You send her a text telling her how much fun you had and can't wait for the next date.
        <br>
        <input class="option" type="radio" name="question3" value=2>In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is
        <br>
        <input class="option" type="radio" name="question3" value=1>In addition to doing above, you think about how lucky you are for finally finding an amazing girl. You hope to start a relationship ASAP
        <br>
    </form>
</div>
<div class="questions">
    <p>4. Crap! You just remembered you have a huge project due this Friday. This might be a problem. How many dates do you have this week?</p>
    <form>
        <input class="option" type="radio" name="question4" value=4>More than 5. You're going to have to cancel one of them.
        <br>
        <input class="option" type="radio" name="question4" value=3>You have a few dates in the pipeline, just testing the waters. You can still make the dates
        <br>
        <input class="option" type="radio" name="question4" value=2>You have one date because you're a one woman kind of guy
        <br>
        <input class="option" type="radio" name="question4" value=1>You have one date. You don't date much, in general.
        <br>
    </form>
</div>
<div class="questions">
    <p>5. Finally, how spontaneous are you?</p>
    <form>
        <input class="option" type="radio" name="question5" value=4>YOLO is your middle name. Your amusement > all else
        <br>
        <input class="option" type="radio" name="question5" value=3>You may not be the most wild or crazy person, but you are definitely down for good times
        <br>
        <input class="option" type="radio" name="question5" value=2>You like to have fun as much as the next guy, as long as things don't get too out of hand
        <br>
        <input class="option" type="radio" name="question5" value=1>I like to plan ahead, no matter what the situation, work or play
        <br>
    </form>
</div>
<br>
<input type="button" id='next' value="Next" onlick="sum_values()">