472,358 Members | 1,947 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,358 software developers and data experts.

Counting Selected Radio Buttons

We have a 10-question quiz for kids, each question being a yes or no
answer using radio selections. I'd like to keep a current total of
yes's and no's at the bottom of the quiz (if the user selects yes to
question 1, the total of yes's increases by 1). I've been searching for
a while but I'm not sure I'm searching with the right keywords. Can
anyone direct me to a source I can review to learn how to do this?



Dec 1 '05 #1
1 8636
Jerry wrote:
We have a 10-question quiz for kids, each question being a yes or no
answer using radio selections. I'd like to keep a current total of
yes's and no's at the bottom of the quiz (if the user selects yes to
question 1, the total of yes's increases by 1). I've been searching for
a while but I'm not sure I'm searching with the right keywords. Can
anyone direct me to a source I can review to learn how to do this?

The stuff below should help. Note that for a set of radios, there is
debate over whether one should always be checked. If you don't make one
checked, user agents (browsers in this case) are left to their own
devices to decide whether to check one by default or not:

<URL: http://www.w3.org/TR/html4/interact/forms.html#radio >

If one is to be checked by default, you will have to either:

1. make all the 'yes' or 'no' buttons checked by default
2. have a 3rd 'no answer' button that is checked by default
3. use yes/no checkboxes with script to only have one checked
4. use a single checkbox with checked for yes

None of the above is particularly nice, so I've used yes/no radio
buttons - be aware that some UAs may take matters into their own hands.
The following has been tested in Firefox and IE, neither of which will
check one by default.

The update function needs to run when the page loads or re-loads, when a
radio button is checked and also when the form is reset - hence is has
been added in three places.

You can add as many questions as you like, as long as they are in the
table they will be included in the total.

<html><head><title>Play Quiz</title>

<style type="text/css">
body {
font-family: arial, sans-serif;
table {
border-collapse: collapse;
th {
padding: 5px 0 2px 5px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: left;
#questions td{
padding: 10px 0 2px 5px;
border-bottom: 1px solid #aaa;

<script type="text/javascript">

function updateButCount(e)

// Get event from W3C or IE event model
var e = e || window.event;

// Test that appropriate features are supported
if ( !document.getElementsByTagName
|| !document.getElementById
) return;

// Initialise variable for keeping count
var butCount = {yes:0, no:0, num:0};
var butSummary = 'Answers cleared';

// Event may have come from load, click or reset
// If event was from 'reset', skip counting yes/no
if (e && 'reset' != e.type){

// Get a collection of the inputs inside x
var x = document.getElementById('quizDiv');
var rButs = x.getElementsByTagName('input');
var temp;

// Loop over all the inputs
for (var i=0, len=rButs.length; i<len; ++i){
temp = rButs[i];

// If the input is a radio button
if ('radio' == temp.type ) {

// Add one to the count of radio buttons
butCount.num += 1;

// If the button is checked
if (temp.checked){

// Add one to butCount.yes or butCount.no as appropriate
butCount[temp.value] += 1;

// Build the summary string - divide butCount.num by two
// to get the number of questions
butSummary = 'You have answered ' + (butCount.yes + butCount.no)
+ ' of ' + (butCount.num/2) + ' questions';

// Write the totals for yes and no and the summary to the page
document.getElementById('yeses').innerHTML = butCount.yes;
document.getElementById('nos').innerHTML = butCount.no;
document.getElementById('summary').innerHTML = butSummary;


</head><body onload="updateButCount(event);">

<!-- Add an onreset event to the form to run updateButCount
when the reset button is clicked -->
<form action="" name="quizForm"

<!-- Add an onclick event the table holding all the radios that
runs updateButCount whenever anything inside is clicked -->
<table id="quizDiv" onclick="updateButCount(event);">
<colgroup span="2" width="40">
<colgroup span="1" width="400">

<!-- Layout the quiz -->
<tbody id="questions">
<td><input type="radio" name="Q1" value="yes"></td>
<td><input type="radio" name="Q1" value="no"></td>
<td>Question 1:<br>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua</td>
<td><input type="radio" name="Q2" value="yes"></td>
<td><input type="radio" name="Q2" value="no"></td>
<td>Question 2:<br>Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</td>
<td><input type="radio" name="Q3" value="yes"></td>
<td><input type="radio" name="Q3" value="no"></td>
<td>Question 3:<br>Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
<td><input type="radio" name="Q4" value="yes"></td>
<td><input type="radio" name="Q4" value="no"></td>
<td>Question 4:<br> Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</td>
<!-- Add some elements with IDs for writing counts to -->
<td id="yeses"></td>
<td id="nos"></td>
<td colspan="3" id="summary"></td>
<td colspan="2" align="center" style="text-align: left;">
<input type="reset" value="Clear"></td>
<td style="text-align: right;">
<input type="submit" value="Submit answers"></td>


Dec 2 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: entoone | last post by:
I am able to make a selection of information when entering a record, with radio buttons giving the option of yes, or no. Which stores their answer as yes, or no in the database. I then have an...
by: Verner Vaz | last post by:
Select Email ID based on 'a' selected radio button Hello there, I have a simple form with some fields to be filled in and when submitted is emailed to a couple of email ID. Now, this form...
by: ewitkop90 | last post by:
Here is my code: <SCRIPT> function transportchange(transport) { if (framenewinstall.Helpdesk.checked) framenewinstall.Helpdesk.checked=false; if (framenewinstall.CircuitNumber.checked)...
by: sam | last post by:
I have 2 radio buttons on my form which are hidden. I need to have these radio buttons visible once a checkbox is selected. The radio buttons are hidden on loading of the form but I cannot make them...
by: tshad | last post by:
Is there a way to allow a user to press a radio button if it is already selected? There is an onCheckedChanged event that fires when the person presses the button and it is isn't selected...
by: lakepeir | last post by:
Hello, I have 4 radio buttons in a groupbox on a form. When I run the application, I would like to only select one radio button, but I can select one radio button from the first three radion...
by: newfie912 | last post by:
I have an online application used for grading students. On one of the pages, I have a table with two rows and each row has 16 cells. The upper row contains the letter grade (A, A-, B+, B, etc)...
by: Dr J R Stockton | last post by:
In comp.lang.javascript message <d4lazy2m.fsf@hotpop.com>, Fri, 18 Jul 2008 23:23:13, Lasse Reichstein Holst Nielsen <lrn@hotpop.composted: Not necessarily. If each set of radio buttons has...
by: mckurban | last post by:
Hi All, I'm not very familiar with Javascript and need help with setting up some javascript code to allow users to create dynamic radio buttons from text field and then to use selected radio value...
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge required to effectively administer and manage Oracle...
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was proposed, which integrated multiple engines and...
by: Matthew3360 | last post by:
Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it so the python app could use a http request to get...
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and...
by: Arjunsri | last post by:
I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and credentials and received a successful connection...
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand. Background colors can be used to highlight important...
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
by: Rahul1995seven | last post by:
Introduction: In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.