如何使用 jquery ajax 传递几个复选框的值答案

【问题标题】：how to pass values of several checkboxes with jquery ajax如何使用 jquery ajax 传递几个复选框的值
【发布时间】：2019-07-12 21:42:24
【问题描述】：

要从几个复选框中获取值，我使用以下代码：

 <form class="myform" method="post" action="">
        <input type="checkbox" class="checkbox" value="11" /><br>
        <input type="checkbox" class="checkbox" value="22" /><br>
        <input type="submit" value="Go" />
  </form>

ajax：

$(document).ready(function(){
            $('.myform').on('submit', function(e){
                //Stop the form from submitting itself to the server.
                e.preventDefault();
                var checkboxvalue = $('.checkbox').val();
                $.ajax({
                    type: "POST",
                    url: '',
                    data: {checkboxvalue: checkboxvalue},
                    success: function(data){
                        $('.response').html(data);
                    }
                });
            });
        });

php:

   if($_SERVER['REQUEST_METHOD'] == "POST") {  

      $value = false;
      if(isset($_POST['checkboxvalue'])){
         $value = $_POST['checkboxvalue'];
      }

      echo 'The value was: ' . $value;
      exit;
   }

问题是：检查第二个复选框时，我得到了值11，即第一个复选框的值。单击两个复选框时，我也得到值11

我想要实现的目标：如果我选中第一个复选框，他应该给我11 作为输出。检查第二个复选框，他应该输出22 作为值。并且当同时选中这两个复选框时，他应该输出11 和22 作为值。

我怎样才能做到这一点？

【问题讨论】：

在你的 ajax 数据中添加 json stringfy @mudraya
将会有更多的类 checkbox 的元素所以看看jQuery each()

标签： javascript php jquery ajax checkbox

【解决方案1】：

使用这个

$(document).ready(function(){
   $('.myform').on('submit', function(e){
        e.preventDefault();
        var checkboxvalue =  [];    
        $("input[type=checkbox]:checked").each(function(i){
          checkboxvalue.push( i.value );
        });
      $.ajax({
                type: "POST",
                url: '',
                data: {checkboxvalue: checkboxvalue},
                success: function(data){
                    $('.response').html(data);
                }
            });
        });
    });

php

 if($_SERVER['REQUEST_METHOD'] == "POST") {  
  $value = false;
  /* the check box value in array*/
  print_r($_POST['checkboxvalue']);
  if(isset($_POST['checkboxvalue'])){
     $value = $_POST['checkboxvalue'];
  }      
  exit;
  }

【讨论】：

我试过了，但仍然不适合我。你能给我一个完整的工作代码吗？那么form、js和php呢？我对ajax不太熟悉
不幸的是，仍然没有回声
你必须检查控制台。

【解决方案2】：

你需要添加name属性来检查

<input type="checkbox" class="checkbox" name="value-check" value="11" /><br>

var checkboxvalue = [];
        $.each($("input[name='value-check']:checked"), function(){            
            checkboxvalue.push($(this).val());
        });

【讨论】：

我试过了，现在回声是：The value was: Array
@mudraya 是的，它是一个数组
您可以使用checkboxvalue.join(", ")将其转换为逗号分隔字符串
或者你可以在php中使用implode(" ",$value);

【解决方案3】：

你需要loop through选中的复选框，你的代码的问题是它总是给你第一个选中的复选框的值

var chkArray = [];
	
$(".checkbox:checked").each(function() {
	chkArray.push($(this).val());
});
	
var selected;
selected = chkArray.join(',') ;

console.log(selected)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div><input type="checkbox" value="1" class="checkbox"> Value 1</div>
    <div><input type="checkbox" value="2" class="checkbox" checked="checked"> Value 2</div>
    <div><input type="checkbox" value="3" class="checkbox"> Value 3</div>
    <div><input type="checkbox" value="4" class="checkbox"checked="checked"> Value 4</div>
    <div><input type="checkbox" value="5" class="checkbox"> Value 5</div>

【讨论】：

【解决方案4】：

如果复选框已被选中，您需要创建一个数组并填充值。

$(document).ready(function(){
        $('.myform').on('submit', function(e){
            //Stop the form from submitting itself to the server.
            e.preventDefault();
          var values = [];
          $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
              values.push($(this).val());
            }

          });
          console.log(values);
        });
    });

见Codepen

【讨论】：