JavaScript数组操作求助：jsPDF复选框仅单个标记问题

问题场景 #

我是前端领域新手，需求是从表单中获取已勾选复选框的ID，在jsPDF生成的PDF中对应标记这些复选框。但运行代码时，即便数组中有2个目标数据，也仅有1个复选框被标记。

问题代码 #

doc.setFontSize(9);
doc.text("Açıklama",6,57);
doc.text("Hastaya Yapılan Uygulama :",6,64);
doc.text("Kullanılan İlaçlar",6,69);
var explanation_application = document.getElementById("explanation_application").value;
textlines = doc.setFontSize(9).splitTextToSize(explanation_application,90);
doc.text(textlines,48,57).value;

doc.setFontSize(8);
doc.text("İzolasyon Durumu:",136,66);

doc.setFontSize(8);
doc.text("Solunum İzolasyonu",163,60);
var checkBox = new jspdf.AcroFormCheckBox();
var checkBoxTxt = document.getElementById("txt").value;
var splitTxt = checkBoxTxt.split(",");
for (let i = 0; i < splitTxt.length; i++){
    if(splitTxt[i] == 'solunum_izolasyonu') {
        checkBox.appearanceState = 'On';
    }
    else {
        checkBox.appearanceState = 'Off';
    }
}
checkBox.readOnly = false;
checkBox.fieldName = "Solunum İzolasyonu";
checkBox.Rect = [191, 58, 2, 2];
checkBox.value = 'solunum_izolasyonu';
doc.addField(checkBox);

doc.setFontSize(8);
doc.text("Damlacık İzolasyonu",163,66);
var checkBox1 = new jspdf.AcroFormCheckBox();
var checkBoxTxt1 = document.getElementById("txt").value;
var splitTxt1 = checkBoxTxt1.split(",");
for (let i = 0; i < splitTxt1.length; i++){
    if(splitTxt1[i] == 'damlacik_izolasyonu') {
        checkBox1.appearanceState = 'On';
    }
    else {
        checkBox1.appearanceState = 'Off';
    }
}
checkBox1.readOnly = false;
checkBox1.fieldName = "Damlacık İzolasyonu";
checkBox1.Rect = [191, 64, 2, 2];
checkBox.value = 'damlacik_izolasyonu';
doc.addField(checkBox1);

doc.setFontSize(8);
doc.text("Temas İzolasyonu",163,72);
var checkBox2 = new jspdf.AcroFormCheckBox();
var checkBoxTxt2 = document.getElementById("txt").value;
var splitTxt2 = checkBoxTxt2.split(",");
for (let i = 0; i< splitTxt2.length; i++){
    if(splitTxt2[i] == 'temas_izolasyonu') {
        checkBox2.appearanceState = 'On';
    }
    else {
        checkBox2.appearanceState = 'Off';
    }
}
checkBox2.readOnly = false;
checkBox2.fieldName = "Temas İzolasyonu";
checkBox2.Rect = [191, 70, 2, 2];
checkBox.value = 'temas_izolasyonu';
doc.addField(checkBox2);

问题原因 #

遍历数组时，每遇到非目标ID就强制将复选框状态设为Off，导致之前找到目标ID时设置的On状态被后续的非目标元素覆盖。比如数组包含['solunum_izolasyonu','damlacik_izolasyonu']，处理第一个复选框时，循环到第二个元素会把状态改回Off。

另外代码还存在重复操作（多次获取同一个DOM元素、重复拆分字符串）和笔误（比如checkBox.value = 'damlacik_izolasyonu'应该是checkBox1.value）。

解决方案 #

1. 一次性获取并拆分复选框ID列表，避免重复操作
2. 对每个复选框，直接判断ID列表中是否包含对应值，无需遍历整个数组
3. 默认状态设为Off，只要存在目标ID就改为On，避免状态被覆盖
4. 修正代码中的笔误

优化后的代码 #

doc.setFontSize(9);
doc.text("Açıklama",6,57);
doc.text("Hastaya Yapılan Uygulama :",6,64);
doc.text("Kullanılan İlaçlar",6,69);
var explanation_application = document.getElementById("explanation_application").value;
textlines = doc.setFontSize(9).splitTextToSize(explanation_application,90);
doc.text(textlines,48,57);

doc.setFontSize(8);
doc.text("İzolasyon Durumu:",136,66);

// 一次性获取并拆分复选框ID列表，避免重复操作
var checkedIds = document.getElementById("txt").value.split(",");

// 处理Solunum İzolasyonu复选框
doc.setFontSize(8);
doc.text("Solunum İzolasyonu",163,60);
var checkBox = new jspdf.AcroFormCheckBox();
// 默认状态为Off，只要数组包含目标ID就设为On
checkBox.appearanceState = checkedIds.includes('solunum_izolasyonu') ? 'On' : 'Off';
checkBox.readOnly = false;
checkBox.fieldName = "Solunum İzolasyonu";
checkBox.Rect = [191, 58, 2, 2];
checkBox.value = 'solunum_izolasyonu';
doc.addField(checkBox);

// 处理Damlacık İzolasyonu复选框
doc.setFontSize(8);
doc.text("Damlacık İzolasyonu",163,66);
var checkBox1 = new jspdf.AcroFormCheckBox();
checkBox1.appearanceState = checkedIds.includes('damlacik_izolasyonu') ? 'On' : 'Off';
checkBox1.readOnly = false;
checkBox1.fieldName = "Damlacık İzolasyonu";
checkBox1.Rect = [191, 64, 2, 2];
checkBox1.value = 'damlacik_izolasyonu'; // 修正之前的笔误
doc.addField(checkBox1);

// 处理Temas İzolasyonu复选框
doc.setFontSize(8);
doc.text("Temas İzolasyonu",163,72);
var checkBox2 = new jspdf.AcroFormCheckBox();
checkBox2.appearanceState = checkedIds.includes('temas_izolasyonu') ? 'On' : 'Off';
checkBox2.readOnly = false;
checkBox2.fieldName = "Temas İzolasyonu";
checkBox2.Rect = [191, 70, 2, 2];
checkBox2.value = 'temas_izolasyonu'; // 修正之前的笔误
doc.addField(checkBox2);

内容的提问来源于stack exchange，提问作者Abdülkadir Furkan Yıldız