anzeigen resultieren aus Checkbox mit JavaScript

Question

Ich möchte mein Ergebnis aus einer Checkbox zeigen, mit Javascript Ich brauche es es mit PHP in der Datenbank zu senden

Ich habe Spalte für jede Checkbox

wenn die chekbox ist ich habe nehme ich die Variablen und sie in meine Datenbank

sonst die Spalte leer

der hTML-Code und Javascript Lassen einfügen

var checks = document.getElementsByClassName('justtest'); 
 
      var str = ''; 
 
      for(i=0; i<3; i++){ 
 
       if(checks[i].checked === true){ 
 
       str += checks[i].value + " "; 
 
       } 
 

 
      } 
 
alert(str);

<div class="form-group"> 
 
    <div class="col-md-3"> 
 
     <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test1" class="justtest" > Test1 
 
     </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-md-3"> 
 
    <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test2" class="justtest"> test2 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-md-3"> 
 
     <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test3" class="justtest"> test3 
 
      </label> 
 
     </div> 
 
     </div> 
 
     </div>

Ich versuche, dies zu tun, aber ohne Ergebnis

var checks = document.getElementsByClassName('justtest'); 
 
      var str = checks.length; 
 
      for(i=0; i<3; i++){ 
 
       if(checks[i].checked === true){ 
 
       str[i]= checks[i].value; 
 
       } 
 

 
      } 
 
alert(str[0]); 
 
alert(str[1]); 
 
alert(str[2]);

Answer 1

Nur wenige Änderungen an Ihrem Code zu bewegen, str ist ein Array von Ergebnis und hat eine Taste, die die Prüffunktion ausgeführt wird, wie jetzt wurde das Skript nur einmal ausgeführt, bevor Sie sogar eine Änderung hatte keine Option

var getValues = function() { 
 
var str = []; 
 
var checks = document.getElementsByClassName('justtest'); 
 
      for(var i=0; i<checks.length; i++){ 
 
       if(checks[i].checked){ 
 
       str.push(checks[i].value); 
 
       } 
 
      } 
 
    
 
    for(var x = 0; x < str.length; x++){ 
 
    alert (str[x]); 
 
    } 
 
    
 
    }

<div class="form-group"> 
 
    <div class="col-md-3"> 
 
     <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test1" class="justtest" > Test1 
 
     </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-md-3"> 
 
    <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test2" class="justtest"> test2 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-md-3"> 
 
     <div class="checkbox"> 
 
     <label> 
 
<input type="checkbox" value="test3" class="justtest"> test3 
 
      </label> 
 
     </div> 
 
     <button onclick="getValues()">Check</button> 
 
     </div> 
 
     </div>

Answer 2

Sind Sie script-Tag im Kopf des Dokuments? Wenn dies der Fall ist, wird dieser Code immer fehlschlagen, da das Dokument die Kontrollkästchen nicht initialisiert hat, um sie abrufen zu können.

Versuchen Sie das Skript an den unteren Rand der Seite (knapp über dem Ende Body-Tag)

Answer 3

auszuwählen, ist es möglich, dies aus html Sicht zu behandeln, in dem Sie alle th geben e Kontrollkästchen gleichen Eingabe-Namen (und verwenden Sie [] nach), dann lassen Sie den Post des Formulars zu Ihrem PHP, und Ihr PHP würde es als Array sehen, von JavaScript-Ende erhalten Sie auch die Werte.

Zunächst lassen Sie mich Ihnen zeigen, die HTML-Version davon

jedes Ihrer Eingabefeld wie dieses

<input type="checkbox" name="justtest[]" value="owk 1">, 
    <input type="checkbox" name="justtest[]" value="owk 2"> 

Hinweis aussehen sollte die justtest [] Namensgebung

, wenn Sie Do Form Post Sie können Ihre PHP mit jeder Schleife verwenden, die Sie mögen e.

g

foreach ($_POST["justtest"] as $key => $value) { 
echo $value; 
} 

Während von Javascript, wie Sie oben Marcin C answer on this page still

zufrieden hier, wenn nicht eine andere Javascript-Ansatz ist getan haben, die auch helfen könnte aus (Führen Sie den Code-Schnipsel es in Aktion zu sehen)

function getInput(){ 
 
    var values = []; 
 
    var inputs = document.getElementsByName("justtest[]"); 
 
    for (var i = 0; i <inputs.length; i++) { 
 
    var inp=inputs[i]; 
 
    if(inp.checked){ 
 
    values.push(inp.value); 
 
     } 
 
    //alert("justtest["+i+"].value="+inp.value); this returns all with their value , we check for only checked ones 
 
     } 
 
alert (values); //alert our values here 
 
    }

<input type="checkbox" name="justtest[]" value="owk 1"> 
 
<input type="checkbox" name="justtest[]" value="owk 2"> 
 
<input type="checkbox" name="justtest[]" value="owk 3"> 
 
<input type="checkbox" name="justtest[]" value="owk 4"> 
 

 
<button onclick="getInput()">Get Input<button>