Question

我是javascripting的新手，但我通过阅读此论坛的Q＆amp; As已经学到了很多东西。就像他们说的那样，学习编码的最好方法是看看其他人如何编码！

我正在尝试使用基于javascript / html的表单来管理我的工作流程。有一点背景，我是一名病理学家，为各种患者样本生成基于文本的报告。大部分输出非常适合使用预先写好的“罐头评论”。我想将这些注释与各种复选框值相关联，这样我就可以查看相应的框，并在textarea中构建我的报告。

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

[] site1 [] site 2 [] site 3 [] site 4

并且可以为每个

选择4种不同诊断中的一种

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

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

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

但是，我似乎无法获得复选框值的两部分以正确的方式填充textarea。我似乎无法弄清楚如何使用填充我的textarea的函数来遍历网站和诊断？非常感谢任何帮助/教育！

感谢。 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">更合适。其次，在实际提供输入后，需要重置值。

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

因此，对于您的复选框只使用一种机制，而不是使用两种：一种用于站点，一种用于诊断。检查是否已经分配了合作伙伴。如果有合作伙伴，请将两个值添加到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

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

<强> Check Fiddle

如何使用从各种复选框派生的字符串值填充textarea？

2 个答案: