如何使用相同的复选框多次提交以创建多组选择?

时间:2012-06-28 01:56:39

标签: php jquery ajax

我想要一组使用AJAX发布到PHP页面的复选框,但是在帖子之后我希望能够使用相同的复选框将另一组选择发送到同一个PHP页面,直到指定的集合数,然后将这些集用作PHP页面中的数据。

我无法弄清楚如何实施。有什么想法吗?

的index.php:

<form id="checkboxes">
  <input type="checkbox" id="1" name="checkboxes[]" value="1" />
  <input type="checkbox" id="2" name="checkboxes[]" value="2" />
  <input type="checkbox" id="3" name="checkboxes[]" value="3" />
  <input type="checkbox" id="1" name="checkboxes[]" value="4" />
  <input type="checkbox" id="1" name="checkboxes[]" value="5" />
  <input type="button" id="button" name="submit" value="Submit" />
</form>
<script type="text/javascript">
  $(function() {
    $("#button").click(function() {
    $.ajax({
      type: "POST",
      url: "process.php",
      data: $("form#checkboxes").serialize(),
      success: function(data) {
        $("#div").load('success.php')
      }
    });
    })
  })
</script>

process.php:

$data = array();
foreach($_POST['checkboxes'] as $key => $value){
  $data[] = "$value";
}

2 个答案:

答案 0 :(得分:0)

您将使用ajax调用的success函数。我们将得到每个复选框的值,然后通过ajax提交表单,防止默认,然后在表单提交后取消选中所有框。

$('something').submit(function(e){
  e.preventDefault();
  var checked = [];
  $.each($('input[type=checkbox]'), function(i,v){
    if($(this).is(':checked')){
      checked.push($(this).val());
    }
  });
  $.ajax({
    url: 'someurl.ext',
    type: 'post',
    data: checked,
    success: function(data){
      $.each($('input[type=checkbox]'), function(i,v){
        $(this).prop('checked', false');
      });
    }

  });
});

答案 1 :(得分:0)

如果您希望数据随时间推移,则需要使用会话。所以,你可以这样使用它:

<?php
    session_start();
    if (!isset($_SESSION["data"]))
        $_SESSION["data"] = array();
    foreach($_POST['checkboxes'] as $key => $value){
      $_SESSION["data"] = "$value";
    }
    // Print out the final array, if there's a parameter final!
    if (isset($_GET["final"]))
        foreach ($_SESSION["data"] as $data)
            echo $data;
?>

对于JavaScript,您需要重置thingy:

<form id="checkboxes">
    <input type="checkbox" id="1" name="checkboxes[]" value="1" />
    <input type="checkbox" id="2" name="checkboxes[]" value="2" />
    <input type="checkbox" id="3" name="checkboxes[]" value="3" />
    <input type="checkbox" id="1" name="checkboxes[]" value="4" />
    <input type="checkbox" id="1" name="checkboxes[]" value="5" />
    <input type="button" id="button" name="submit" value="Submit" />
</form>
<script type="text/javascript">
    $(function() {
        $("#button").click(function() {
            $.ajax({
                type: "POST",
                url: "process.php",
                data: $("form#checkboxes").serialize(),
                success: function(data) {
                    $("#div").load('success.php');
                    $("form#checkboxes > input[type='checkbox']").removeAttr('checked');
                }
            });
        });
    });
</script>