I am sorry for the late reply, but being an old fart, I often
find it very difficult to follow a long list of instructions.
This is what I have come up with...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#myform {
width:80%;
margin:auto;
background-color:#fff;
}
#myform fieldset:first-of-type {
padding:43px 0 10px;
border-bottom:0;
box-shadow:inset 0 0 20px #999;
}
#myform fieldset:last-of-type {
padding:10px 0;
box-shadow:inset 0 0 20px #999;
}
#myform table {
width:85%;
margin:auto;
}
#myform table td {
width:20%;
padding:5px 0;
text-align:center;
}
#myform fieldset:last-of-type td {
/*height:95px;*/
}
#bfive {
margin-top:10px;
}
.num {
cursor:pointer;
}
.bgcolor {
background-color:#f00;
}
</style>
<script>
(function() {
'use strict';
var b,n,c,k,e,i=0,d=document,f,temp=0,
a=[0,0,0,0],test=[true,true,true,true];
function init(){
b=d.getElementsByClassName('but');
n=d.getElementsByClassName('num');
f=d.getElementById('myform');
f.reset();
while(e=f.elements[i++]) {
if(e.type=='checkbox') {
e.onclick=function () {
var e,i=0,total=0;
while(e=f.elements[i++]) {
if((e.type=='checkbox')&&(e.checked)) {
total+=Number(e.value)||0;
f.elements.total.value=total;
temp=total;
}
}
}
}
}
for(c=0;c<b.length;c++){
b[c].disabled=false;
b[c].addEventListener('click',setNumber(c));
}
d.getElementById('bone').onclick=function() {
for(k=0;k<n.length;k++) {
if((test[k]==false)&&(n[k].value!=0)) {
b[k].disabled=true;
}
}
}
d.getElementById('done').onclick=function() {
a.sort(function numbers(a,b){return a- b});
for(c=0;c<n.length;c++) {
if(n[c].value==a[0]) {
n[c].className+=' bgcolor';
n[c].setAttribute('title','lowest');
}
if(n[c].value==a[1]) {
n[c].setAttribute('title','next lowest');
}
if(n[c].value==a[2]) {
n[c].setAttribute('title','third lowest');
}
if(n[c].value==a[3]) {
n[c].setAttribute('title','highest');
}
}
}
d.getElementById('btwo').onclick=function() {
for(c=0;c<b.length;c++) {
b[c].disabled=false;
n[c].className=n[c].className.replace(' bgcolor','');
n[c].removeAttribute('title');
}
temp=0;
a=[0,0,0,0];
test=[true,true,true,true];
}
}
function setNumber(c) {
b[c].onclick=function() {
n[c].value=temp;
for(k=0;k<n.length;k++) {
if((n[c].value==a[k])&&(b[k].disabled!=true)){
a[k]=0;
}
a[c]=temp;
n[k].value=a[k];
test[k]=true;
test[c]=false;
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<form id="myform" action="checkboxes.asp" method="post">
<fieldset>
<table><tr>
<td><input type="text" name="one" size="3" value="0" class="num" readonly="readonly"></td>
<td><input type="text" name="two" size="3" value="0" class="num" readonly="readonly"></td>
<td><label>Total: <input type="text" name="total" id="total" size="3" value="0" readonly="readonly"></label></td>
<td><input type="text" name="three" size="3" value="0" class="num" readonly="readonly"></td>
<td><input type="text" name="four" size="3" value="0" class="num" readonly="readonly"></td>
</tr><tr>
<td><input type="button" value="ONE" class="but"></td>
<td><input type="button" value="TWO" class="but"></td>
<td></td>
<td><input type="button" value="THREE" class="but"></td>
<td><input type="button" value="FOUR" class="but"></td>
</tr><tr>
<td></td>
<td><input type="button" value="retain" id="bone"></td>
<td><input type="button" value="done" id="done"></td>
<td><input type="reset" value="reset" id="btwo"></td>
<td></td>
</tr></table>
</fieldset><fieldset>
<table><tr>
<td><label><input type="checkbox" name="check_list" value="41">41</label></td>
<td><label><input type="checkbox" name="check_list" value="42">42</label></td>
<td><label>43<input type="checkbox" name="check_list" value="43"></label></td>
</tr><tr>
<td><label><input type="checkbox" name="check_list" value="40">40</label></td>
<td></td>
<td><label>44<input type="checkbox" name="check_list" value="44"></label></td>
</tr><tr>
<td><label><input type="checkbox" name="check_list" value="39">39</label></td>
<td></td>
<td><label>45<input type="checkbox" name="check_list" value="45"></label></td>
</tr><tr>
<td><label><input type="checkbox" name="check_list" value="38">38</label></td>
<td></td>
<td><label>46<input type="checkbox" name="check_list" value="46"></label></td>
</tr></table>
</fieldset>
</form>
</body>
</html>
...which may, or may not, be closer to what I think that
you might have requested.
Whatever the outcome of my latest attempt we will,
hopefully, get there in the end.
Bookmarks