javascript - 生成风险评分的表格

Question

我正在创建一个冗长的表格。如果您符合条件(复选标记)，则有 5 个不同的部分供您标记。总共可能有 50 个问题。每个部分都有不同的权重/分数(第 1 部分每个 1 分，第 2 部分每个 3 分，依此类推)。如何显示总分以及我的脚本计算是否正常？抱歉，我对此很陌生。没有包括整个表格，因为它很长。

<script language="JavaScript1.1" type="text/javascript">
/* <![CDATA[ */

var calctxt = '';
var xmltxt = '';
var htmtxt = '';

function DVTScoreWells_fx() {
with(document.DVTScoreWells_form){

Score = 0.0;
doCalc = true;

if (1PQ1.checked){
Score = Score + 1;
}
if (1PQ2.checked){
Score = Score + 1;
}
if (1PQ3.checked){
Score = Score + 1;
}
if (1PQ4.checked){
Score = Score + 1;
}
if (1PQ5.checked){
Score = Score + 1;
}
if (1PQ6.checked){
Score = Score + 1;
}
if (1PQ7.checked){
Score = Score + 1;
}
if (1PQ8.checked){
Score = Score + 1;
}
if (1PQ9.checked){
Score = Score + 1;
}
if (1PQ10.checked){
Score = Score + 1;
}
if (1PQ11.checked){
Score = Score + 1;
}
if (1PQ12.checked){
Score = Score + 1;
}
if (1PQ13.checked){
Score = Score + 1;
}
if (1PQ14.checked){
Score = Score + 1;
}
if (1PQ15.checked){
Score = Score + 1;
}
if (2PQ1.checked){
Score = Score + 2;
}
if (2PQ2.checked){
Score = Score + 2;
}
if (2PQ3.checked){
Score = Score + 2;
}

cctotal.value = Score;

if (doCalc){

rrclr();
}
}
}
</script>

<form name="DVTScoreWells_form" id="DVTScoreWells_form" action="#" onsubmit="return false;" onreset="rrclr();">
<br><br>
<p>Are you at risk for DVT?  Fill out this Risk Assessment and take a look.</p><br><br>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#FFFFFF" cellpadding="200" cellspacing="200" class="bodyContainer">
<tbody>
<tr>
<td class="leftSidebar" sectionid="leftSidebar" valign="top">
<div>
<div>
<div class="title" style="text-align:left">
<div class="title" contentid="title" style="text-align: left;">
<div>
<div>
<span style="text-decoration: none;"><span style="font-family: Comic Sans MS; font-size: 18pt;">Each Risk Factor 

Represents 1 Point</span></span>
</div>
<div>
&nbsp;
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<table class="infusion-field-container" style="width:270;">
<tbody>
<tr>

<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ1" name="1PQ1" type="checkbox" onclick="DVTScoreWells_fx();" 

/>
<label for="1PQ1">Age 41 - 59</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ2" name="1PQ2" type="checkbox" onclick="DVTScoreWells_fx();" 

/>
<label for="1PQ2">Minor surgery planned</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ3" name="1PQ3" type="checkbox" onclick="DVTScoreWells_fx

();"/>
<label for="1PQ3">History of prior major surgery</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ4" name="1PQ4" type="checkbox" onclick="DVTScoreWells_fx

();"/>
<label for="1PQ4">Varicose veins</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ5" name="1PQ5" type="checkbox" onclick="DVTScoreWells_fx

();"/>
<label for="1PQ5">History of inflammatory bowel disease</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ6" name="1PQ6" type="checkbox" onclick="DVTScoreWells_fx

();"/>
<label for="1PQ6">Swollen legs (current)</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ7" name="1PQ7" type="checkbox" onclick="DVTScoreWells_fx

();"/>
<label for="1PQ7">Obesity (BMI >30)</label>
</td>
</tr><tr>
</td>
</tr><tr>
<td class="infusion-field-input-container" style="width:270px;">
<input class="infusion-field-input-container" id="1PQ8" name="1PQ8" type="checkbox" onclick="DVTScoreWells_fx

();"/>

Answer 1

老实说，您当前的代码处理此问题的方式很容易因拼写错误或遗漏而出错，并且维护起来会很痛苦。

我的主要建议是利用包含运行总计的 Score id 的 div，并让每个复选框调用一个函数，将它们的值作为参数来调整 score 的 innerHTML，例如:HTML:
Your Risk is <span id='risklevel'>Low</span> (<span id='score'>0</span>)
<input type='checkbox' onchange='updateScore(this,3);' />

JS:

function updateScore(ele,val){
    var score = document.getElementById('score');
    var riskLevel = document.getElementById('risklevel');

    var curScore = parseFloat(score.innerHTML);
    curScore += (ele.checked ? val : -val);
    score.innerHTML = curScore;

    if(curScore <= 1){
        riskLevel.innerHTML = "Low";
    }else if(curScore <= 2){
        riskLevel.innerHTML = "Moderate";
    }else if(curScore <= 4){
        riskLevel.innerHTML = "High";
    }else{
        riskLevel.innerHTML = "Very High";
    }
}

或
如果您想坚持一次计算所有方法...

以某种本地 dom 可搜索的方式标记复选框及其部分(我建议类以 data- 为前缀(例如:data-riskFactorSet ))，给每个复选框一个 data-* 属性(例如作为 data-riskvalue) 并让您的 js 遍历所有复选框，结合 data-* 属性的 int/float 值。

注意:因为它是一个不太流行的构造...... (ele.checked ? val : -val)使用三元运算符。可以把它想象成一个内嵌的 if-then-else 语句，并规定 true 和 false 部分的返回类型必须相同。它是这样工作的:
test ? ifTrue : ifFalse