给几个复选框赋予功能，检查与否

我正在尝试执行一项功能，可以打印出哪些复选框被选中，并且按下按钮后不会检查哪些复选框。下一步是：如果那些真正的人做了一次手术，那么那些有假的人做了另一次手术。最终目的是将复选框的值发送到txt.file。对于IM要去这个网站使用的代号为 “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();" />

来源

2017-08-17 Ricardo Alves

什么是你的问题？ – DarthJDG

对不起，问题是，我只能得到第一个复选框的值。如果检查与否。你能看到我做错了什么吗？即时消息得到的结果只有在选中时才为“true1”，否则为“false1”。而我没有得到其他人。 –

您可以使用代码：

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 sample

来源

2017-08-17 11:00:40

给几个复选框赋予功能，检查与否

回答

相关问题