473,725 Members | 2,122 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 8854
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><ti tle>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.getEl ementsByTagName
|| !document.getEl ementById
) 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.getEle mentById('quizD iv');
var rButs = x.getElementsBy TagName('input' );
var temp;

// Loop over all the inputs
for (var i=0, len=rButs.lengt h; 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.getEle mentById('yeses ').innerHTML = butCount.yes;
document.getEle mentById('nos') .innerHTML = butCount.no;
document.getEle mentById('summa ry').innerHTML = butSummary;


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

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

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

<!-- 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 update record page that reads information in the database, and presently it will not retrieve the previously selected option from the database. I have tried all sorts of if else statements, and can't get anything to work. I want the previously...
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 has 10 radio buttons of which only one can be selected at any time.
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) framenewinstall.CircuitNumber.checked=false; switch (transport) { case 0: Helpdesk.innerText="No Info Needed";
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 visible once the check box is checked. The error I get is 'document.radiology.rcontmedia.style' is null or not an object. The code I am using is below. Please note that I have no previous experience programming in javascript. function...
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 already. If it is selected, it doesn't fire. This isn't the case with a checkbox. The event fires whether the control is already checked or not. Thanks,
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 buttons and the last radio button. It appears that the last radio button is not grouped with the others although I have them all in the same groupbox. Please help. Thanks.
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) and the lower row has a 16 radio buttons for selecting the appropriate grade. This all writes to a SQL server back-end and has been working fine for several semesters. Some faculty members have complained that it is hard to read and see which...
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 an additional default hidden button, then it is only necessary to test that said button is not selected to determine that one of the others has been selected.
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 (text string) to appear as firs in the entered field. I've maneged to get to the dynamic creation part: <script type="text/javascript"> function update_radio_buttons() { var companyName =...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.