duanmangxie7131
duanmangxie7131
2012-07-23 05:18

用Javascript或jQuery计数器

I'm developing a website for a survey, and I want to show the user the number of questions that are left to answer.

As the questions are dynamic, I read the total number of questions from the database to show in the counter.

Then each time the user answers a question (the user chooses the answer from a radio button group) I'll decrement the counter by one and so on.

I have the function which is called whenever the user clicks on a radio button and it works nicely. But I don't know how to represent the counter? and how to show the counter on the screen? and what values should I pass to that function? it would be helpful also if we can show the counter in a nice visual way, the counter should be always be visible even when the user scrolls up or down.

Each question is in a unique :

<div id="Q1">What is your gender?
<input type='radio' name='RQ1' value='Male' onClick="RadioClicked(Q1)" />
<input type='radio' name='RQ1' value='Female' onClick="RadioClicked(Q1)" />
</div>

Here is the Javascript function, for example I'm changing the background color to make sure the function works, but in this function I should decrement the counter:

function RadioClicked(Question){
        document.getElementById(Question).style.backgroundColor = "Gray";
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dtjbcda841554 dtjbcda841554 9年前

    Try the following:

    var q = $('div[id^="Q"]').length // number of questions
    $('input[type=radio]').change(function(){
        $(this).parent().css('background-color', 'Gray');
        var remained = q - $('input[type=radio]:checked').length // number of unanswered questions
        $('#remaining').text(remained)
    })
    

    DEMO

    点赞 评论 复制链接分享

为你推荐