2

我是 javascripting 的新手，但是通过阅读这个论坛上的问答，我学到了很多东西。就像他们说的那样，学习编码的最好方法是看看其他人是如何编码的！

我正在尝试使用基于 javascript/html 的表单来管理我的工作流程。一点背景知识，我是一名病理学家，为各种患者样本生成基于文本的报告。大部分输出都非常适合使用预先编写的“罐头评论”。我希望将此类评论链接到各种复选框值，以便我可以简单地选中相应的框，并将我的报告构建在文本区域中。

例如，如果我有 4 个不同的组织部位：

[] 站点 1 [] 站点 2 [] 站点 3 [] 站点 4

并且可以为每个选择 4 种不同的诊断之一

[] 诊断1 [] 诊断2 [] 诊断3 [] 诊断4

我希望能够选择一个站点和一个诊断，并在 textarea 中有相关的值，输出格式如下：

站点 1，活检：
- 诊断 1

站点 2，活检：
- 诊断 1

SITE3，活检：
- 诊断 3

站点 4，活检：
- 诊断 2

我在这里有一些表格的开头：

<body>
Duodenum sites <br/>
<form name=duodenum>
<input type="checkbox" name="duoDx1" id="duoDx1" /> DUO, NSA <br />
<input type="checkbox" name="duoDx2" id="duoDx2" /> DUO, _ PART <br />
<input type="checkbox" name="duoDx3" id="duoDx3" /> DUO, BULB <br />
<input type="checkbox" name="duoDx4" id="duoDx4" /> DUO, ULCER <br />
</form>

<p>&nbsp;</p>
Duodenum diagnoses <br/>    
<form name=duodiags>
<input type="checkbox" name="duoDiag1" id="duoDiag1" /> NSA <br />
<input type="checkbox" name="duoDiag2" id="duoDiag2" /> FOCAL ACTIVE <br />
<input type="checkbox" name="duoDiag3" id="duoDiag3" /> C A  <br />
<input type="checkbox" name="duoDiag4" id="duoDiag4" /> CELIAC <br />
</form>

<p>&nbsp;</p>

<p>&nbsp;</p>

<textarea id="outPut" placeholder="Diagnoses" cols=80 rows=20></textarea>

</body>

我的JavaScript：

var duoDxs = {
duoDx1: 'DUODENUM, BIOPSY: \n \n',
duoDx2: 'DUODENUM, ___ PART, BIOPSY: \n \n',
duoDx3: 'DUODENUM, BULB, BIOPSY: \n \n',
duoDx4: 'DUODENUM, "ULCER", BIOPSY: \n \n'
}

var duoDiags = {
duoDiag1: '     - NO SIGNIFICANT ABNORMALITIES \n',
duoDiag2: '     - FOCAL ACUTE INFLAMMATION\n',
duoDiag3: '     - CHRONIC AND ACTIVE DUODENITIS\n',
duoDiag4: '     - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES (SEE 
COMMENT)\n'
}

var mytextbox = document.getElementById('outPut');


var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "checkbox" && inputs[i].name.indexOf('duoDx') > -1) {
inputs[i].onchange = function() {
if (this.checked) {
mytextbox.value = mytextbox.value + duoDxs[this.name] + duoDiags[this.name];
} else {
mytextbox.value = mytextbox.value.replace(duoDxs[this.name], "");
            }
        }
    }
}

JSFiddle

但是，我似乎无法让复选框值的两个部分以正确的方式填充文本区域。我似乎无法弄清楚如何使用填充我的 textarea 的功能来遍历站点和诊断？任何帮助/教育将不胜感激！

谢谢。CK

4

2 回答 2

1

根据您的问题，您希望将站点和诊断配对，并且该诊断可以多次使用：

站点 1，活检：
- 诊断 1

站点 2，活检：
- 诊断 1 << 诊断 1 的第二次使用

SITE3，活检：
- 诊断 3

站点 4，活检：
- 诊断 2

在这种情况下，复选框不是要走的路。首先，由于一个诊断似乎只有一个部位，a会更合适。其次，需要在您实际提供输入后重新设置这些值。<input type="radio">

把你的网站想象成一个咖啡自动售货机：首先你选择奶油的量（网站），然后选择糖的量（诊断），要么机器自动冲泡你的咖啡并将两者的值重置为未确定，要么你必须按一个按钮才能得到您的咖啡（或机器会给您的任何具有个人风味的饮料）。

因此，不要只为您的复选框使用一种机制，而是使用两种机制：一种用于站点，一种用于诊断。检查是否已经分配了合作伙伴。如果有伙伴，将两个值都添加到 textarea 并删除选择：

var choosenDiagnosis = null;
var choosenSite = null;

function testAndFill(){
    if(choosenDiagnosis !== null && choosenSite !== null){
        mytextbox.value += duoDxs[choosenSite.id]+ duoDiags[choosenDiagnosis.id] + "\n";
        choosenDiagnosis.checked = choosenSite.checked = false;
        choosenDiagnosis = choosenSite = null;
    }
}

var diagInputs = document.getElementsByName("duoDiag");
for (var i = 0; i < diagInputs.length; i++) {
    diagInputs[i].onchange = function() {
        choosenDiagnosis = this;
        testAndFill();       
    };
}
var diaxInputs = document.getElementsByName("duoDx");
for (i = 0; i < diaxInputs.length; i++) {
    diaxInputs[i].onchange = function() {
        choosenSite = this;
        testAndFill();       
    };

JSFiddle

于 2012-11-29T22:58:31.040 回答
0

换这个就行了

var duoDiags = {
             duoDiag1: '     - NO SIGNIFICANT ABNORMALITIES \n',
             duoDiag2: '     - FOCAL ACUTE INFLAMMATION\n',
             duoDiag3: '     - CHRONIC AND ACTIVE DUODENITIS\n',
             duoDiag4: '     - VILLOUS BLUNTING AND INCREASED 
                       INTRAEPITHELIAL LYMPHOCYTES  (SEE COMMENT)\n'
}

和

var duoDiags = {
    duoDx1: '     - NO SIGNIFICANT ABNORMALITIES \n \n',
    duoDx2: '     - FOCAL ACUTE INFLAMMATION\n\n',
    duoDx3: '     - CHRONIC AND ACTIVE DUODENITIS\n\n',
    duoDx4: '     - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES
                     (SEE COMMENT)\n\n'
}

检查小提琴

于 2012-11-29T23:04:02.283 回答