将选定的复选框存储在数组中并将其与facebox一起使用

Question

我在使用 jQuery 的插件 Facebox 处理表单中的一些数据时遇到一些问题。 我想要完成的基本上是将所选复选框数量的值放入一个数组中，并在我的弹出窗口中使用它来使用 PHP 处理它。 我在表单页面上有类似这样的内容：

form.html

<input type="checkbox" name="equip" value="<?php echo $equip_id; ?>" />
<input type="checkbox" name="equip" value="<?php echo $equip_id; ?>" />
<input type="checkbox" name="equip" value="<?php echo $equip_id; ?>" />

<input type="button" name="replace" onClick="replace_equip()" />

还有更多复选框，但我认为这些足以开始使用。

这里是 replace_equip()

function replace_equip() {
  var nArr = new Array();
    $("input:checkbox[name=equip]:checked").each(function() {
  nArr.push($(this).val());
  $.facebox(function() {
    $.ajax({
      data: { name : nArr },
      error: function() {
      $.facebox("err");
      },
      success: function(data) {
      $.facebox(data);
      },
      type: "post",
      url: "test.php"
    });
  });
});
}

我试图将选定的复选框保存到一个数组中，以便我可以在 test.php 中使用它进行 PHP 处理。

我刚刚开始使用 jquery 和 javascript，所以请原谅您可能发现的任何巨大错误！

Answer 1

首先，您的代码存在一些风格问题。首先，您应该选择不对数组、对象等使用 new 语法。而是使用 var array = []; 之类的内容声明您的 Array代码>.其次，您使用的是内联 onClick，如果您已经在使用 jQuery，则应避免使用它。相反，请使用类似 $('input[name="replace"]').on('click', function() {...}); 的内容。您还应该考虑在函数中使用camelCase，如果您喜欢下划线，请将它们与vars 一起使用。

现在谈谈你问题的实质。我像这样重构了你的代码：

$('input[name="replace"]').on('click', function() {
    replaceEquip();
});

function replaceEquip() {
  var array = [];
  $("input:checkbox[name=equip]:checked").each(function() {
    array.push($(this).val());
  });

  $.facebox(function() {
    $.ajax({
      type: "POST",
      url: "test.php",
      data: { name : array },
      error: function() {
        $.facebox("err");
      },
      success: function(data) {
        $.facebox(data);
      }
    });
  });
}

在你的 PHP 代码中，你可以 json_decode() 这个数组并按照你想要的方式使用它。我还将 type 和 url 参数移至顶部，因为您的 error 和 success 函数可能会变得相当冗长。

我会考虑阅读 JavaScript 模式（至少是要点章节）。