給幾個複選框賦予功能，檢查與否

我正在嘗試執行一項功能，可以打印出哪些複選框被選中，並且按下按鈕後不會檢查哪些複選框。下一步是：如果那些真正的人做了一次手術，那麼那些有假的人做了另一次手術。最終目的是將複選框的值發送到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

給幾個複選框賦予功能，檢查與否

回答

相關問題