Question

我有一个以下代码，它获取已选中复选框的值并在按钮单击时提交数据。请查看代码并让我在哪里出错。它无法正常工作

$(document).ready(function() {
$(function(){
  $('#btnClick').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
      $.ajax({
            url: 'server.php',
            type: "POST",
           data: ({val[i]}), ????
           success: function(data){

            }
        });


    });
  });
});
});

Answer 1

使用serialize更容易，它专为这种情况而设计。

$(function(){
  $('#btnClick').click(function(){
   var val = $('input[type=checkbox]:checked').serialize();
   $.ajax({
        url: 'server.php',
        type: "POST",
        data: val,
        success: function(data){

        }
    });

   });
 });

最好使用$(input[type=checkbox]:checked)作为选择器而不是$(':checkbox:checked')。来自jQuery文档：

$（'：checkbox'）相当于$（'[type = checkbox]'）。和其他一样   建议使用伪类选择器（以“：”开头的那些）   在它之前加上标签名称或其他选择器;否则，   通用选择器（“”）是隐含的。换句话说，裸露   $（'：checkbox'）相当于$（'：checkbox'），所以   应该使用$（'input：checkbox'）。

因为：checkbox是jQuery扩展而不是CSS的一部分   规范，查询使用：复选框无法利用   本机DOM querySelectorAll（）提供的性能提升   方法。要在现代浏览器中获得更好的性能，请使   [type =“checkbox”]代替。

Answer 2

将ajax函数保留在each循环之外。

$(function(){})＆amp; $(document).ready(function(){})是一个而且是相同。前者是速记形式。

$(function(){
  var val[], i=0;
  $('#btnClick').click(function(){
      $('input:checkbox:checked').each(function(){
      val[i] = $(this).val();
      i++;
    });
     $.ajax({
            url: 'server.php',
            type: "POST",
           data: {'checked_values':val},
           success: function(data){
                // do something with returned data
            }
     });
  });

});

在 server.php 页面

中

$checked = $_POST['checked_values']; // will contain an array with checked values
// proceed to do something with $checked array

将复选框值传递给php脚本页面jquery

2 个答案: