javascript - 通过 jQuery 仅传递选定的复选框和属性输入文本框？

Question

我有一个显示元素和当前库存的表格。每行库存旁边都有一个复选框和一个文本框。

该网页显示当前库存并提供从库存中删除所选库存的选项。所以基本上是从库存中检查商品。

我希望能够通过 jQuery 传递所选项目和要从库存中删除的输入金额，但我无法找到“序列化”复选框和文本输入的最佳方法。

我已经尝试了一些基于其他SO问题的策略，但我似乎只能获取选中框值或所有文本输入值，但不能获取选中框值，只能获取输入值选中的框。

我想要得到什么:

检查了 Apple 并输入了 5:box=Apple&amt=5

我尝试过的内容(在 on('submit') 函数中看到):

使用时得到的结果 var details = $('input[name="box"]:checked').serialize();:

检查了 Apple 并输入了 5:box=Apple

使用时我得到了什么 var details = $('#checkout_form').serialize();
或者
var 详细信息 = $('input[id="amt"]').serialize();:

检查了Apple并输入了5:Apple=5&Banana=&Corn=&Deli%20Sandwich=&....

下面是用于显示 JSON 数据表并将数据传递给 PHP 的 jQuery 代码:

  var url = 'get_students.php';
  var $list = $('#inventory');

  $(document).ready(function() {
    $.ajax({
      type: 'POST',
      url: url,
      data: {
        command: 'get_inventory',
      },
      beforeSend: function() {
        $list.html('<div id="load" class="spinner-border text-muted"></div>');
      },

      success: function(data) {
        console.log(data);
        DISPLAY_INVENTORY(data);
        $('#load').remove();
      },

      fail: function() {
        $list.html('Could not get data ...');
      },

    });
  });

  function DISPLAY_INVENTORY(JSON_DATA) {
    var COL_NAMES = ['Select', 'Item', 'Inventory', 'Amount'];

    var data = jQuery.parseJSON(JSON_DATA);
    var $TABLE_OBJ = $('<table class="table table-striped" >');
    $TABLE_OBJ.attr('id', 'student_table');
    $list.append($TABLE_OBJ);

    // $(output).append($TABLE_OBJ);

    //Print a table header
    var $ROW_OBJ = $('<tr>');
    var $THEAD = $('<thead class="thead-light">');
    $THEAD.append($ROW_OBJ);
    $TABLE_OBJ.append($THEAD);

    for (var j = 0; j < COL_NAMES.length; j++) {
      var $TB_HEADER = $('<th>');
      $TB_HEADER.html(COL_NAMES[j]);
      $ROW_OBJ.append($TB_HEADER);
    }

    $TBODY = $('<tbody>');

    //Print rows
    for (var i = 0; i < data.length; i++) {
      if (i == data.length - 1) {
        $TABLE_OBJ.append($TBODY);
      }

      $ROW_OBJ = $('<tr>');
      $TBODY.append($ROW_OBJ);
      $BOX_OBJ = $('<input name="box" class="form-control ml-4" type="checkbox">');
      $ROW_OBJ.append($BOX_OBJ);
      //Print columns
      $.each(data[i], function(key, value) {
        // if (i % 2 == 0) {
        //   var ITEM_NAME = value;
        // }
        if (key === 'item') {
          rowItemName = value;
        }

        $COL_OBJ = $('<td>');
        $INP_OBJ = $('<input id="amt" class="text-center form-control" type="text" size="3">');
        if (!$INP_OBJ.attr('name') || !($BOX_OBJ.attr('value'))) {
          $INP_OBJ.attr('name', rowItemName);
          $BOX_OBJ.attr('value', rowItemName);
          // $INP_OBJ.attr('id', ITEM_NAME);
        }

        // $INP_OBJ.attr('name', ITEM_NAME);
        // $INP_OBJ.attr('id', ITEM_NAME);
        $COL_OBJ.html(value);
        $ROW_OBJ.append($COL_OBJ);
      });
      $ROW_OBJ.append($INP_OBJ);
    }
  }

  // add form to checkout
  $('#checkout_form').on('submit', function(e) {
        e.preventDefault();
        // var details = $('#checkout_form').serialize();
        // var details = $('input[name="box"]:checked', 'input[id="amt"]').serialize();
        // var details = $('input[name="box"]:checked').serialize();
        var details = $('input[id="amt"]').serialize();

        console.log(details);

        //Update the info into database table
        $.post(url, {
            command: 'update_inventory',
            log_data: details,
          },
          function(data, status) {
            console.log('Data: ' + data + '\nStatus: ' + status);

            //$status.html(status + ": " + data);
          });
      });

如果需要，这里是 JSON 数据:

[{"item":"Apple","amount":"10"},
{"item":"Banana","amount":"11"},
{"item":"Corn","amount":"12"},
{"item":"Deli Sandwich","amount":"5"},
{"item":"Egg Plant","amount":"12"},
{"item":"French Fries","amount":"15"},
{"item":"Green Beans","amount":"21"},
{"item":"Hamburgers","amount":"7"},
{"item":"Ice Cream","amount":"3"},
{"item":"Jell-O","amount":"12"},
{"item":"Kiwi","amount":"8"},
{"item":"Lima Beans","amount":"32"},
{"item":"Mashed Potatoes","amount":"11"},
{"item":"Noodle Soup","amount":"54"},
{"item":"Orange","amount":"10"},
{"item":"Pear","amount":"5"},
{"item":"Quinoa","amount":"4"},
{"item":"Raisins","amount":"12"},
{"item":"String Cheese","amount":"16"},
{"item":"Tomato Soup","amount":"23"},
{"item":"Unsalted Nuts","amount":"19"},
{"item":"Vienna Sausage","amount":"24"},
{"item":"Wheat Bread","amount":"15"},
{"item":"Xavier Soup","amount":"17"},
{"item":"Yogurt","amount":"11"},
{"item":"Zucchini","amount":"12"}]

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <!-- ------------------------------------- -->
  <!-- LOAD EXTERNAL STYLES -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- Fonts and Icons -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/build.css">
  <link rel="icon" href="https://txwes.edu/media/twu/style-assets/images/favicon.ico" type="image/x-icon">

  <!-- ------------------------------------- -->
  <style>
    html,
    body {
      height: 100%
    }

    body {
      background: url('img/bg.jpg');
    }

    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fas {
      color: black !important
    }
  </style>
  <title>Checkout</title>
</head>

<body>

  <!-- Header -->
  <div class="jumbotron text-center h-auto " style="background: rgba(244, 226, 66,0.5); border-bottom: 5px outset rgb(244, 226, 66);">
    <a href="index.html"><img src="img/ramlogo3.png" alt="ramlogo"></a>
  </div>

  <div class="container">
    <div class="jumbotron text-center">
      <h1>Checkout</h1>
      <form id="checkout_form" method="post">
        <div id="inventory" class="text-center border border-primary rounded p-3" style="overflow-y:scroll; overflow-x:hidden; height:400px;"></div><br>
        <button class="btn btn-primary" type="submit" name="button">Checkout</button>
      </form>
    </div>
  </div>

</body>
<script type="text/javascript">
...see above...
</script>

</html>

如果需要更多解释，请告诉我，谢谢您的帮助!

Answer 1

要在单行中序列化数据，您可以尝试以下代码:

 var details = $('input[name="box"]:checked').closest("tr").find("input").serialize();