为多个复选框提供功能，无论是否选中

Question

我正在尝试执行一个功能，在按下按钮后打印出哪些复选框被选中，哪些复选框未选中。 下一步是：如果那些为True的人执行一项操作，则具有False的人执行另一项操作。 最终目的是将复选框的值发送到 txt.file。为此，我将使用此站点上的代码"https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/">

这是我的代码：

var check1 = document.getElementById('Port1');
check1.checked = false;
var check2 = document.getElementById('Port2');
check2.checked = false;
var check3 = document.getElementById('Port3');
check3.checked = false;
var check4 = document.getElementById('Port4');
check4.checked = false;
var check5 = document.getElementById('Port5');
check5.checked = false;
var check6 = document.getElementById('Port6');
check6.checked = false;
var check7 = document.getElementById('Port7');
check7.checked = false;
var check8 = document.getElementById('Port8');
check8.checked = false;
var check9 = document.getElementById('Port9');
check9.checked = false;
var check10 = document.getElementById('Port10');
check10.checked = false;
var check11 = document.getElementById('Port11');
check11.checked = false;
var check12 = document.getElementById('Port12');
check12.checked = false;
var check13 = document.getElementById('Port13');
check13.checked = false;
var check14 = document.getElementById('Port14');
check14.checked = false;
var check15 = document.getElementById('Port15');
check15.checked = false;
var check16 = document.getElementById('Port16');
check16.checked = false;
var check17 = document.getElementById('Port17');
check17.checked = false;
var check18 = document.getElementById('Port18');
check18.checked = false;
var check19 = document.getElementById('Port19');
check19.checked = false;
var check20 = document.getElementById('Port20');
check20.checked = false;
var check21 = document.getElementById('Port21');
check21.checked = false;
var check22 = document.getElementById('Port22');
check22.checked = false;
var check23 = document.getElementById('Port23');
check23.checked = false;
var check24 = document.getElementById('Port24');
check24.checked = false;
function savePortsAsFile() {
if (check1.checked === true) {
document.write("true" + document.getElementById('Port1').value);
} else if (check1.checked === false) {
document.write("false" + document.getElementById('Port1').value);
}
if (check2.checked === true) {
document.write("true" + document.getElementById('Port2').value);
} else if (check2.checked === false) {
document.write("false" + document.getElementById('Port2').value);
}
if (check3.checked === true) {
document.write("true" + document.getElementById('Port3').value);
} else if (check3.checked === false) {
document.write("false" + document.getElementById('Port3').value);
}
if (check4.checked === true) {
document.write("true" + document.getElementById('Port4').value);
} else if (check4.checked === false) {
document.write("false" + document.getElementById('Port4').value);
}
if (check5.checked === true) {
document.write("true" + document.getElementById('Port5').value);
} else if (check5.checked === false) {
document.write("false" + document.getElementById('Port5').value);
}
if (check6.checked === true) {
document.write("true" + document.getElementById('Port6').value);
} else if (check6.checked === false) {
document.write("false" + document.getElementById('Port6').value);
}
if (check7.checked === true) {
document.write("true" + document.getElementById('Port7').value);
} else if (check7.checked === false) {
document.write("false" + document.getElementById('Port7').value);
}
if (check8.checked === true) {
document.write("true" + document.getElementById('Port8').value);
} else if (check8.checked === false) {
document.write("false" + document.getElementById('Port8').value);
}
if (check9.checked === true) {
document.write("true" + document.getElementById('Port9').value);
} else if (check9.checked === false) {
document.write("false" + document.getElementById('Port9').value);
}
if (check10.checked === true) {
document.write("true" + document.getElementById('Port10').value);
} else if (check10.checked === false) {
document.write("false" + document.getElementById('Port10').value);
}
if (check11.checked === true) {
document.write("true" + document.getElementById('Port11').value);
} else if (check11.checked === false) {
document.write("false" + document.getElementById('Port11').value);
}
if (check12.checked === true) {
document.write("true" + document.getElementById('Port12').value);
} else if (check12.checked === false) {
document.write("false" + document.getElementById('Port12').value);
}
if (check13.checked === true) {
document.write("true" + document.getElementById('Port13').value);
} else if (check13.checked === false) {
document.write("false" + document.getElementById('Port13').value);
}
if (check14.checked === true) {
document.write("true" + document.getElementById('Port14').value);
} else if (check14.checked === false) {
document.write("false" + document.getElementById('Port14').value);
}
if (check15.checked === true) {
document.write("true" + document.getElementById('Port15').value);
} else if (check15.checked === false) {
document.write("false" + document.getElementById('Port15').value);
}
if (check16.checked === true) {
document.write("true" + document.getElementById('Port16').value);
} else if (check16.checked === false) {
document.write("false" + document.getElementById('Port16').value);
}
if (check17.checked === true) {
document.write("true" + document.getElementById('Port17').value);
} else if (check17.checked === false) {
document.write("false" + document.getElementById('Port17').value);
}
if (check18.checked === true) {
document.write("true" + document.getElementById('Port18').value);
} else if (check18.checked === false) {
document.write("false" + document.getElementById('Port18').value);
}
if (check19.checked === true) {
document.write("true" + document.getElementById('Port19').value);
} else if (check19.checked === false) {
document.write("false" + document.getElementById('Port19').value);
}
if (check20.checked === true) {
document.write("true" + document.getElementById('Port20').value);
} else if (check20.checked === false) {
document.write("false" + document.getElementById('Port20').value);
}
if (check21.checked === true) {
document.write("true" + document.getElementById('Port21').value);
} else if (check21.checked === false) {
document.write("false" + document.getElementById('Port21').value);
}
if (check22.checked === true) {
document.write("true" + document.getElementById('Port22').value);
} else if (check22.checked === false) {
document.write("false" + document.getElementById('Port22').value);
}
if (check23.checked === true) {
document.write("true" + document.getElementById('Port23').value);
} else if (check23.checked === false) {
document.write("false" + document.getElementById('Port23').value);
}
if (check24.checked === true) {
document.write("true" + document.getElementById('Port24').value);
} else if (check24.checked === false) {
document.write("false" + document.getElementById('Port24').value);
}

<form>
<table>
<tr>
<th><input type="checkbox" name="port1" value="1" id="Port1">Port1</th>
<th><input type="checkbox" name="port2" value="2" id="Port2">Port2</th>
<th><input type="checkbox" name="port3" value="3" id="Port3">Port3</th>
<th><input type="checkbox" name="port4" value="4" id="Port4">Port4</th>
</tr>
<tr>
<th><input type="checkbox" name="port5" value="5" id="Port5">Port5</th>
<th><input type="checkbox" name="port6" value="6" id="Port6">Port6</th>
<th><input type="checkbox" name="port7" value="7" id="Port7">Port7</th>
<th><input type="checkbox" name="port8" value="8" id="Port8">Port8</th>
</tr>
<tr>
<th><input type="checkbox" name="port9" value="9" id="Port9">Port9</th>
<th><input type="checkbox" name="port10" value="10" id="Port10">Port10</th>
<th><input type="checkbox" name="port11" value="11" id="Port11">Port11</th>
<th><input type="checkbox" name="port12" value="12" id="Port12">Port12</th>
</tr>
<tr>
<th><input type="checkbox" name="port13" value="13" id="Port13">Port13</th>
<th><input type="checkbox" name="port14" value="14" id="Port14">Port14</th>
<th><input type="checkbox" name="port15" value="15" id="Port15">Port15</th>
<th><input type="checkbox" name="port16" value="16" id="Port16">Port16</th>
</tr>
<tr>
<th><input type="checkbox" name="port17" value="17" id="Port17">Port17</th>
<th><input type="checkbox" name="port18" value="18" id="Port18">Port18</th>
<th><input type="checkbox" name="port19" value="19" id="Port19">Port19</th>
<th><input type="checkbox" name="port20" value="20" id="Port20">Port20</th>
</tr>
<tr>
<th><input type="checkbox" name="port21" value="21" id="Port21">Port21</th>
<th><input type="checkbox" name="port22" value="22" id="Port22">Port22</th>
<th><input type="checkbox" name="port23" value="23" id="Port23">Port23</th>
<th><input type="checkbox" name="port24" value="24" id="Port24">Port24</th>
</tr>
</table>
</form>
<input class="buttonSave" type="button" value="Save" id="btnSave" onclick="savePortsAsFile();" />

Answer 1

您可以使用该代码：

var inputs = document.querySelectorAll("input[type='checkbox']");

function savePortsAsFile() {
var checkedArray = [];
inputs.forEach(function (i) {
checkedArray = checkedArray.concat(
{
name: i.name,
checked: i.checked
}
);
});
// console.log(checkedArray);
var json = JSON.stringify(checkedArray);
var blob = new Blob([json], {
type: "application/json"
});
var url = URL.createObjectURL(blob);
var a = document.getElementById('anchorD');
a.download    = "inputs.json";
a.href        = url;
a.textContent = "Download";
}

jsBin 示例