如何使用从各个复选框派生的字符串值填充文本区域？

Question

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

我正在尝试使用基于javascript / html的表单来管理我的工作流程。 有点背景，我是一名病理学家，负责为各种患者样本生成基于文本的报告。 许多输出非常适合使用预先编写的“罐头注释”。 我想将这样的注释链接到各种复选框值，以便我可以简单地选中相应的复选框，并在文本区域内构建报告。

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

[] site1 []网站2 []网站3 []网站4

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

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

我希望能够选择一个站点和一个诊断，并在文本区域中具有相关值，并以以下格式输出：

SITE1，BIOPSY：
-诊断1

SITE2，BIOPSY：
-诊断1

SITE3，BIOPSY：
-诊断3

SITE4，BIOPSY：
-诊断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

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

谢谢。 CK

Answer 1

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

SITE1, BIOPSY:
- DIAGNOSIS 1

SITE2, BIOPSY:
- DIAGNOSIS 1    << second usage of DIAGNOSIS 1

SITE3, BIOPSY:
- DIAGNOSIS 3

SITE4, BIOPSY:
- DIAGNOSIS 2

在这种情况下，没有办法使用复选框。 首先，由于似乎只有一个站点可以进行一次诊断，所以<input type="radio">会更合适。 其次，在实际提供输入之后，需要重置值。

想想您的站点更多是一台咖啡自动售货机：首先选择奶油量（站点），然后选择糖量（诊断），然后机器会自动冲泡咖啡并将其值重置为不确定必须按下按钮才能拿到咖啡（或咖啡机会提供给您的任何具有独特风味的饮料）。

因此，复选框不仅使用一种机制，还使用了两种：一种用于站点，另一种用于诊断。 麻烦检查伙伴是否已被分配。 如果有伙伴，则将两个值都添加到文本区域并删除选择：

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

Answer 2

只要更换这个

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'
}

检查小提琴

如何使用从各个复选框派生的字符串值填充文本区域？

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-11-29 22:58:31

解决方案2
0 2012-11-29 23:04:02

如何使用从各个复选框派生的字符串值填充文本区域？

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-11-29 22:58:31

解决方案2 0 2012-11-29 23:04:02

解决方案1
1 已采纳 2012-11-29 22:58:31

解决方案2
0 2012-11-29 23:04:02