jsuelflow
asked on
Select Image like a radio button; multiple button groups on page.
I have adapted the related solution previously given, but I want to have multiple button groups on the same page. How is this best accomplished?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function setSelected(obj) {
var mySpans = document.getElementById("myImgs").getElementsByTagName("td");
for (var t=0,spn; spn=mySpans[t]; t++) {
spn.style.border = "4px white solid";
spn.style.background = "#eee";
spn.style.color = "black"
}
obj.style.border = "4px green solid";
obj.style.background = "white";
obj.style.color = "green";
document.getElementById("selectedImg").value = obj.childNodes[0].id;
}</script>
<style>
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.8em;
}
table {
width:50%;
}
td {
width:150px;
vertical-align:top;
padding:12px;
border:4px white solid;
text-align: center;
-moz-border-radius:18px;
-webkit-border-radius:18px;
}
tr {
background-color:#eee;
}
</style>
<title>Daily Check-In</title>
</head>
<body>
<table align="center" id="myImgs">
<form>
<tr>
<td colspan="5"><h3>Today, my overall ENERGY is:</h3></td>
</tr>
<tr>
<input type="hidden" id="energy" name="energy">
<td id="01" onclick="setSelected(this)"><img src="images/batt-01.png"><br />
Very Low</td>
<td id="02" onclick="setSelected(this)"><img src="images/batt-02.png"><br />
Somewhat Low</td>
<td id="03" onclick="setSelected(this)"><img src="images/batt-03.png"><br />
Average</td>
<td id="04" onclick="setSelected(this)"><img src="images/batt-04.png"><br />
Somewhat High</td>
<td id="05" onclick="setSelected(this)"><img src="images/batt-05.png"><br />
Very High</td>
</tr>
<tr>
<td colspan="5"><h3>Today, my overall MOOD is:</h3></td>
</tr>
<tr>
<input type="hidden" id="mood" name="mood">
<td id="01" onclick="setSelected(this)"><img src="images/mood-01.png"><br />
Very Sad</td>
<td id="02" onclick="setSelected(this)"><img src="images/mood-02.png"><br />
Somewhat Sad</td>
<td id="03" onclick="setSelected(this)"><img src="images/mood-03.png"><br />
Average</td>
<td id="04" onclick="setSelected(this)"><img src="images/mood-04.png"><br />
Somewhat Happy</td>
<td id="05" onclick="setSelected(this)"><img src="images/mood-05.png"><br />
Very Happy</td>
</tr>
<tr>
<td colspan="5"><input name="submit" type="button" value="SUBMIT" /></td>
</tr>
</form>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
this,'mood','myImgs' should be this,'mood'
No need to include that, sorry missed my eye .
Thanks for the points and have a great day.
No need to include that, sorry missed my eye .
Thanks for the points and have a great day.
ASKER
Line 74 seemed to have an extraneous 'myImgs' in the onclick; removal of that did not alter functionality; please advise if there was a reason for its inclusion.
Again, very many thank yous!