Geben Sie Funktion an mehrere Kontrollkästchen, aktiviert oder nicht

Ich versuche, eine Funktion, die mich druckt, welche der Kontrollkästchen aktiviert sind und welche Kontrollkästchen nicht nach dem Drücken einer Schaltfläche aktiviert sind. Der nächste Schritt ist: Wenn diejenigen, die wahr sind, eine Operation ausführen, tun diejenigen, die False haben, eine andere. Der letzte Zweck ist das Senden der Werte des Kontrollkästchens an txt.file. Für gehend, das im den Code auf dieser Seite verwenden "https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/"Geben Sie Funktion an mehrere Kontrollkästchen, aktiviert oder nicht

Dies ist mein Code:

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();" />

Quelle

2017-08-17 Ricardo Alves

Und was ist Ihre Frage ? – DarthJDG

Ok sorry, das Problem ist, dass ich nur den Wert der ersten Checkbox bekommen kann. Wenn es überprüft wird oder nicht. Kannst du sehen, was ich falsch mache? Das Ergebnis, dass im bekommen ist nur "wahr1", wenn es überprüft wird, oder "falsch1" wenn nicht überprüft wird. Und ich bekomme die anderen nicht. –

Sie diesen Code verwenden können:

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

Quelle

2017-08-17 11:00:40

Geben Sie Funktion an mehrere Kontrollkästchen, aktiviert oder nicht

Antwort

Verwandte Themen