我只是为物理治疗师创建一个表格和表格。需要您帮助计算"基于响应的总和"。极端难度值可以是"0"，没有难度可以是"4">
我熟悉阅读和修改js，html，css代码。这是我写的。
<FORM >
<TABLE BORDER>
<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Any of usual work (household, work)</TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="5"></TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT> Grooming your hair</TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="5"></TD>
</TR>
</TABLE>
</FORM>
我不知道如何计算此表格的结果值
<h4 style="text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>
<form action="" method="get">
<b> Enter Patient's Name :</b> <input type="text" /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)</h4>
<style>table, td { border: 1px solid grey }
td {
text-align: center;
min-width: 125px;
max-width: 125px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td { font-weight: bold }
#the-Sum {
display: block;
margin: 10px 0 0 20px;
font-weight: bold;
color:crimson;
}</style>
<form id="the-Form">
<table>
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme Difficulty or Unable to Perform Activity (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
<tr>
<td> Any of usual work, household, or school activities</td>
<td><input type="radio" name="household" value="0"></td>
<td><input type="radio" name="household" value="1"></td>
<td><input type="radio" name="household" value="2"></td>
<td><input type="radio" name="household" value="3"></td>
<td><input type="radio" name="household" value="4"></td>
</tr>
<tr>
<td> Your usual hobbies, recreational, sporting activities</td>
<td><input type="radio" name="hobbies" value="0"></td>
<td><input type="radio" name="hobbies" value="1"></td>
<td><input type="radio" name="hobbies" value="2"></td>
<td><input type="radio" name="hobbies" value="3"></td>
<td><input type="radio" name="hobbies" value="4"></td>
</tr>
<tr>
<td> Lifting bag of groceries to waist level</td>
<td><input type="radio" name="groceryw" value="0"></td>
<td><input type="radio" name="groceryw" value="1"></td>
<td><input type="radio" name="groceryw" value="2"></td>
<td><input type="radio" name="groceryw" value="3"></td>
<td><input type="radio" name="groceryw" value="4"></td>
</tr>
<tr>
<td> Lifting a bag of groceries above your head </td>
<td><input type="radio" name="groceryd" value="0"></td>
<td><input type="radio" name="groceryd" value="1"></td>
<td><input type="radio" name="groceryd" value="2"></td>
<td><input type="radio" name="groceryd" value="3"></td>
<td><input type="radio" name="groceryd" value="4"></td>
</tr>
<tr>
<td> Grooming your hair </td>
<td><input type="radio" name="grooming" value="0"></td>
<td><input type="radio" name="grooming" value="1"></td>
<td><input type="radio" name="grooming" value="2"></td>
<td><input type="radio" name="grooming" value="3"></td>
<td><input type="radio" name="grooming" value="4"></td>
</tr>
<tr>
<td> Pushing up on your hands (e.g. from bathtub or chair) </td>
<td><input type="radio" name="pushing" value="0"></td>
<td><input type="radio" name="pushing" value="1"></td>
<td><input type="radio" name="pushing" value="2"></td>
<td><input type="radio" name="pushing" value="3"></td>
<td><input type="radio" name="pushing" value="4"></td>
</tr>
<tr>
<td> Preparing food (e.g. peeling, cutting </td>
<td><input type="radio" name="food" value="0"></td>
<td><input type="radio" name="food" value="1"></td>
<td><input type="radio" name="food" value="2"></td>
<td><input type="radio" name="food" value="3"></td>
<td><input type="radio" name="food" value="4"></td>
</tr>
<tr>
<td> Driving </td>
<td><input type="radio" name="driving" value="0"></td>
<td><input type="radio" name="driving" value="1"></td>
<td><input type="radio" name="driving" value="2"></td>
<td><input type="radio" name="driving" value="3"></td>
<td><input type="radio" name="driving" value="4"></td>
</tr>
<tr>
<td> Vaccuming, sweeping, or raking </td>
<td><input type="radio" name="cleaning" value="0"></td>
<td><input type="radio" name="cleaning" value="1"></td>
<td><input type="radio" name="cleaning" value="2"></td>
<td><input type="radio" name="cleaning" value="3"></td>
<td><input type="radio" name="cleaning" value="4"></td>
</tr>
<tr>
<td> Dressing </td>
<td><input type="radio" name="dressing" value="0"></td>
<td><input type="radio" name="dressing" value="1"></td>
<td><input type="radio" name="dressing" value="2"></td>
<td><input type="radio" name="dressing" value="3"></td>
<td><input type="radio" name="dressing" value="4"></td>
</tr>
<tr>
<td> Doing up buttons </td>
<td><input type="radio" name="dbuttons" value="0"></td>
<td><input type="radio" name="dbuttons" value="1"></td>
<td><input type="radio" name="dbuttons" value="2"></td>
<td><input type="radio" name="dbuttons" value="3"></td>
<td><input type="radio" name="dbuttons" value="4"></td>
</tr>
<tr>
<td> Using tools or appliances</td>
<td><input type="radio" name="appliance" value="0"></td>
<td><input type="radio" name="appliance" value="1"></td>
<td><input type="radio" name="appliance" value="2"></td>
<td><input type="radio" name="appliance" value="3"></td>
<td><input type="radio" name="appliance" value="4"></td>
</tr>
<tr>
<td> Opening doors </td>
<td><input type="radio" name="doors" value="0"></td>
<td><input type="radio" name="doors" value="1"></td>
<td><input type="radio" name="doors" value="2"></td>
<td><input type="radio" name="doors" value="3"></td>
<td><input type="radio" name="doors" value="4"></td>
</tr>
<tr>
<td> Cleaning </td>
<td><input type="radio" name="cleaning1" value="0"></td>
<td><input type="radio" name="cleaning1" value="1"></td>
<td><input type="radio" name="cleaning1" value="2"></td>
<td><input type="radio" name="cleaning1" value="3"></td>
<td><input type="radio" name="cleaning1" value="4"></td>
</tr>
<tr>
<td> Tying or lacing shoes</td>
<td><input type="radio" name="shoes" value="0"></td>
<td><input type="radio" name="shoes" value="1"></td>
<td><input type="radio" name="shoes" value="2"></td>
<td><input type="radio" name="shoes" value="3"></td>
<td><input type="radio" name="shoes" value="4"></td>
</tr>
<tr>
<td> Sleeping</td>
<td><input type="radio" name="sleep" value="0"></td>
<td><input type="radio" name="sleep" value="1"></td>
<td><input type="radio" name="sleep" value="2"></td>
<td><input type="radio" name="sleep" value="3"></td>
<td><input type="radio" name="sleep" value="4"></td>
</tr>
<tr>
<td> Laundering cloths (e.g. washing, ironing, folding)</td>
<td><input type="radio" name="laundry" value="0"></td>
<td><input type="radio" name="laundry" value="1"></td>
<td><input type="radio" name="laundry" value="2"></td>
<td><input type="radio" name="laundry" value="3"></td>
<td><input type="radio" name="laundry" value="4"></td>
</tr>
<tr>
<td>Opening a jar</td>
<td><input type="radio" name="jar" value="0"></td>
<td><input type="radio" name="jar" value="1"></td>
<td><input type="radio" name="jar" value="2"></td>
<td><input type="radio" name="jar" value="3"></td>
<td><input type="radio" name="jar" value="4"></td>
</tr>
<tr>
<td> Throwing a ball </td>
<td><input type="radio" name="ball" value="0"></td>
<td><input type="radio" name="ball" value="1"></td>
<td><input type="radio" name="ball" value="2"></td>
<td><input type="radio" name="ball" value="3"></td>
<td><input type="radio" name="ball" value="4"></td>
</tr>
<tr>
<td> Carrying a small suitcase with affected limb </td>
<td><input type="radio" name="carrying" value="0"></td>
<td><input type="radio" name="carrying" value="1"></td>
<td><input type="radio" name="carrying" value="2"></td>
<td><input type="radio" name="carrying" value="3"></td>
<td><input type="radio" name="carrying" value="4"></td>
</tr>
</tbody>
</table>
<output id="the-Sum"> total = 0 </output>
</form>
<script>
const
theForm = document.querySelector('#the-Form'),
theTotal = document.querySelector('#the-Sum'),
List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
;
// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })
theForm.onchange = function()
{
let total = 0;
List_RadioGroup.forEach(xElm=>{
total += parseInt( document.querySelector(`input[name="${xElm}"]:checked`).value );
})
theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type="button" value="Print or Save as pdf" onClick="window.print()">
</form></div>
新的和完整的解决方案
const
theForm = document.querySelector('#the-Form'),
theTabBody = document.querySelector('#Activities-Table tbody'),
theTotal = document.querySelector('#the-Sum'),
theReset = document.querySelector('#the-Reset'),
PrintButton = document.querySelector('#bt-Print'),
ActivitiesList = [
{ name: 'household', lib: 'Any of usual work, household, or school activities' }
, { name: 'hobbies', lib: 'Your usual hobbies, recreational, sporting activities' }
, { name: 'groceryw', lib: 'Lifting bag of groceries to waist level' }
, { name: 'groceryd', lib: 'Lifting a bag of groceries above your head' }
, { name: 'grooming', lib: 'Grooming your hair' }
, { name: 'pushing', lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
, { name: 'food', lib: 'Preparing food (e.g. peeling, cutting ..)' }
, { name: 'driving', lib: 'Driving' }
, { name: 'cleaning', lib: 'Vaccuming, sweeping, or raking ' }
, { name: 'dressing', lib: 'Dressing' }
, { name: 'dbuttons', lib: 'Doing up buttons' }
, { name: 'appliance', lib: 'Using tools or appliances' }
, { name: 'doors', lib: 'Opening doors' }
, { name: 'cleaning1', lib: 'Cleaning' }
, { name: 'shoes', lib: 'Tying or lacing shoes' }
, { name: 'sleep', lib: 'Sleeping' }
, { name: 'laundry', lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
, { name: 'jar', lib: 'Opening a jar' }
, { name: 'ball', lib: 'Throwing a ball' }
, { name: 'carrying', lib: 'Carrying a small suitcase with affected limb' }
]
;
function CaculSum()
{
let total = 0;
ActivitiesList.forEach( line => {
total += parseInt(document.querySelector(`input[name="${line.name}"]:checked`).value);
})
theTotal.textContent = ` total = ${total} `;
}
function GlobalInit()
{
let Cheking = '';
ActivitiesList.forEach( (line,iLine) => {
let
newRow = theTabBody.insertRow(-1),
newCell = newRow.insertCell(0);
newCell.textContent = line.lib;
Cheking = 'checked';
for (let i=0; i<5; i++) {
newCell = newRow.insertCell(i+1); // id="R-${iLine}-${i}"
newCell.innerHTML = `<input type="radio" name="${line.name}" id="R-${iLine}-${i}" value="${i}" ${Cheking}>`
newCell.innerHTML += `<label for="R-${iLine}-${i}">☐</label>`; // not checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">☑</label>`; // checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">✔</label>`; // print checked
Cheking = '';
}
})
theTotal.textContent = ' total = 0 ';
}
GlobalInit();
theForm.onchange = CaculSum;
theForm.onreset = function() {
theTotal.textContent = ` total = 0 `;
};
PrintButton.onclick = function(){
window.print();
}body {
font :16px Arial, Helvetica, sans-serif;
}
h3 {
text-align:center;
color:blue;
}
table {
border-collapse: collapse;
margin: 10px 20px;
}
td {
border: 1px solid grey;
padding: 2px 10px;
}
td {
text-align: center;
min-width: 100px;
max-width: 100px;
}
tr td:first-child {
text-align: left;
min-width: 350px;
max-width: 350px;
}
thead td {
font-weight: bold;
background: lavender
}
#the-Sum {
display: inline-block;
margin: 10px 20px;
padding: 10px;
font-weight: bold;
color: crimson;
border: 1px solid grey;
width: 350px;
}
tbody tr:nth-child(even) {
background: lavender
}
#the-Form > label,
#the-Form > input {
background-color:lavender;
color: black;
margin: 5px 10px;
padding: 5px;
font-weight: bold
}
#the-Form > input {
border: 1px solid grey;
width : 300px;
}
#the-Form tbody label { font-size: 22px; }
input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; }
input[type=radio] + label + label { display:none; color:black; }
input[type=radio]:checked + label { display:none }
input[type=radio]:checked + label + label { display:inline }
input[type=radio] + label + label + label { display:none }<style media="print">
h3, output { color: black; }
h4, button { display: none; }
table { margin: 10px 0; }
tr td:first-child { min-width: 400px; max-width: 400px; }
tbody tr:nth-child(even) { background: none }
#the-Form tbody label { display:none }
input[type=radio]:checked + label + label + label { display:inline !important }
</style>
<h3> Dr ABC<br> MYLocation</h3>
<h4> We are interested in knowing wheather you are having any difficulty with the
activities listed below <u> because of your upper limb problem </u>
for which you are seeking attention. <br>Provide an answer for each activity
Today, <u>do you or would you </u> have any difficulty with: (check boxes below
on each line)
</h4>
<form id="the-Form">
<label for="patientName"> Enter Patient's Name :</label>
<input type="text" id="patientName" value="" />
<table id="Activities-Table">
<thead>
<tr>
<td>ACTIVITIES </td>
<td>Extreme difficulty (0)</td>
<td>Quite a bit of difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>Little Difficulty (3)</td>
<td>No Difficulty (4)</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<output id="the-Sum"></output>
<!-- <button type="submit">submit</button> -->
<button type="reset">reset</button>
<button id="bt-Print">Print or Save as pdf</button>
</form>var total = 0;
var hi = getelementById("hi");
hi.onclick = function(){
total = 0;
}
尝试将 id 添加到所有复选框，并向其添加一个 onclick 函数，将总数相加
https://jsfiddle.net/Lvejzuac/