如何使用同一復選框多次提交以創建多組選擇？

Question

我希望有一組使用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";
}

Answer 1

您將使用ajax調用的成功功能。 我們將獲取每個復選框的值，然后通過ajax提交表單，阻止Default，然后在提交表單后取消選中所有復選框。

$('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');
      });
    }

  });
});

Answer 2

如果您希望數據隨時間流逝，則需要使用會話。 因此，您可以通過以下方式使用它：

<?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>