<html>
<head>
<title>Abakada HTML Demo: Getting Checked Values of Multiple RadioButtons</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="JavaScript">
function getChoices ( ) {
msg.innerHTML = "";
selected = Array.from ( theForm.querySelectorAll ( 'input[type="radio"]:checked' ) );
if ( selected.length > 0 ) {
msg.innerHTML = "Selected items:<br>"
// enumerate selected values
for ( var i = 0; i < selected.length; i ++ ) {
msg.innerHTML += selected [ i ].value + "<br>";
}
}
else msg.innerHTML = "Nothing selected."
}
function zapMsg ( ) {
msg.innerHTML = "";
}
</script>
<style>
.options {
border: 1px inset; padding: 30;
background-color: beige;
}
</style>
</head>
<body>
<div class="header"><h2>Abakada HTML Demo: <b>Getting Checked Values of Multiple RadioButtons</b></h2></div>
<hr size=1 width=92%>
<center>
<form id="theForm" onreset="zapMsg ( )">
<h4>Things I want in my life.</h4>
<table class="options">
<tbody>
<tr>
<td><input id=want1 name=want1 value=Money type=radio></td>
<td><label for=want1>Money</label></td>
<td><input id=want2 name=want2 value=Food type=radio></td>
<td><label for=want2>Food</label></td></tr>
<tr>
<td><input id=want3 name=want3 value=Shelter type=radio></td>
<td><label for=want3>Shelter</label></td>
<td><input id=want4 name=want4 value=Clothing type=radio></td>
<td><label for=want4>Clothing</label></td></tr>
<tr>
<td><input id=want5 name=want5 value=Children type=radio></td>
<td><label for=want5>Children</label></td>
<td><input id=want6 name=want6 value="Good Health" type=radio></td>
<td><label for=want6>Good Health</label></td></tr>
<tr>
<td><input id=want7 name=want7 value=Travel type=radio></td>
<td><label for=want7>Travel</label></td>
<td><input id=want8 name=want8 value=God type=radio></td>
<td><label for=want8>God</label></td></tr>
</tr>
</tbody>
</table>
<p><input onclick="getChoices ( )" type=button value="Get Choices">
<input type=reset value="Reset"></p>
<div id="msg"></div>
</form>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>