使用JavaScript

时间:2016-10-10 18:52:43

标签: javascript php html checkbox

我想通过javascript复选框显示我的结果 我需要它用PHP发送到数据库

每个复选框都有列

如果检查了chekbox,我会将变量插入到我的数据库中

否则我将列留空

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]);

3 个答案:

答案 0 :(得分:1)

您的代码几乎没有变化,str是一个结果数组,并添加了一个执行检查功能的按钮,因为现在脚本只执行一次,甚至在您更改选择任何选项之前

&#13;
&#13;
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]);
    }
  
  }
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

有可能从html的角度处理这个问题,你给所有的复选框输入相同的名字(并在之后使用[]),然后让表单的帖子把它带到你的php,和你的php会把它看作数组,从javascript结束你也得到了值。

首先让我向您展示它的HTML版本

您的每个输入字段应如下所示

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

注意 justtest []命名

当你做表格发布时,你可以使用任何你喜欢的循环你的PHP 例如

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

虽然从你上面的javascript做过 Marcin C answer on this page still

如果不满意,这里是另一种可能有帮助的javascript方法(运行代码段以查看它的实际效果)

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>

答案 2 :(得分:0)

您的文档头部是否有脚本标记? 如果是这样,此代码将始终失败,因为文档不会初始化复选框以便能够检索它们。

尝试将脚本移动到页面底部(正文结束标记上方)