javascript - 使用 JavaScript 显示复选框结果

Question

我想用 javascript 显示复选框的结果 我需要它用 php 将其发送到数据库

每个复选框都有一列

如果选中复选框，我将获取变量并将它们插入到我的数据库中

否则我将该列留空

html 代码和 JavaScript

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>

我尝试这样做，但没有任何结果

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

对代码进行少量更改，str 是一个结果数组，并添加了一个将执行检查功能的按钮，因为现在在您更改选择任何选项之前，脚本仅执行一次

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>