Question

我有多个复选框可以获得所有收藏水果。

HTML

List Favourite<br>

    <table border=1>
        <th rowspan=3>Name</th>
        <tr>
        <th colspan=3>Favourite Fruits</th>
        <tr>
        <th>Banana</th>
        <th>Apple</th>
        <th>Mangoes</th>

        <tr>

        <td>John<input type="hidden" id="U0001"/></td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Banana"/>
        </td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Apple"/>
        </td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Mangoes"/>
        </td>

        <tr>

        <td>Mark<input type="hidden" id="U0002"/></td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Banana"/>
        </td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Apple"/>
        </td>
        <td align="center">
            <input type="checkbox" name="fruits[]" value="Mangoes"/>
        </td>

        <tr>

        <td colspan=4>
            <input type="button" value="Submit" id="btnSubmit"/>
        </td>
    </table>

步骤是：
1.有两个用户，John和Mark
然后我们勾选每个收藏的水果 3.之后单击提交按钮
4.将其保存到数据库

现在的问题是： 如何通过btnSubmit点击并将其存储到数据库中来获取每个用户根据其用户ID（输入隐藏）检查的复选框的所有值？

示例将保存在表格上表

uid    | favourites_fruits
U0001  | Apple, Mangoes
U0002  | Banana, Apple

JS

$('#btnSubmit').on('click', function()
{

});

Demo Fiddle

Answer 1

首先，您需要从关联元素中提取值，并决定如何存储它们。在此示例中，我创建了两个单独的数组：johns_favourite_fruits和marks_favourite_fruits。您检查.checked属性，如果是，则将关联值添加到数组中。然后，该数组以JSON格式发布到服务器。

这不一定是最优雅的解决方法，但它可以完成工作：

$("#btnSubmit").click(function() {
  // Collect the results
  var fruitsNodeList = document.getElementsByName("fruits[]");
  var johns_favourite_fruits = [];
  var marks_favourite_fruits = [];
  for (var i = 0; i < fruitsNodeList.length; i++) {
    if (i < 3) {
      if (fruitsNodeList[i].checked) {
        johns_favourite_fruits.push(fruitsNodeList[i].value);
      }
    } else {
      if (fruitsNodeList[i].checked) {
        marks_favourite_fruits.push(fruitsNodeList[i].value);
      }
    }
  }

  // Debug
  console.log(johns_favourite_fruits);
  console.log(marks_favourite_fruits);

  // Post the results
  $.post("update.php", // Replace this with your PHP script
    {
        johns_favourite_fruits: johns_favourite_fruits,
        marks_favourite_fruits: marks_favourite_fruits
    },
    function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    }
  );
});

提交值后，您可以从$_POST中提取它们，并从那里将它们插入到数据库中：

$_POST['johns_favourite_fruits'];
$_POST['marks_favourite_fruits'];

如何插入它们取决于您使用的是MySQL，MySQLi还是PDO。当然，你绝对应该使用参数化查询！

我创建了一个展示JavaScript here。

的JSFiddle

希望这有帮助！

Answer 2

我在HTML模型中稍作修改以利用选择器。

$(function() {
  $('#btnSubmit').click(function() {
    $('#result').html('');
    $('.users').each(function() {
      var uid = $(this).attr('id');
      $('#result').append('<h3>' + $(this).parent().text() + '\'s favourite fruit(s)</h3>');
      $('input[data-uid=' + uid + ']:checked').each(function() {
        $('#result').append('<div>'+ $(this).val() + '</div>');
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
List Favourite<br>

<table border=1>
  <th rowspan=3>Name</th>
  <tr>
    <th colspan=3>Favourite Fruits</th>
    <tr>
      <th>Banana</th>
      <th>Apple</th>
      <th>Mangoes</th>

      <tr>

        <td>John<input type="hidden" class="users" id="U0001" /></td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Banana" />
        </td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Apple" />
        </td>
        <td align="center">
          <input type="checkbox" data-uid="U0001" name="fruits[]" value="Mangoes" />
        </td>

        <tr>

          <td>Mark<input type="hidden" id="U0002" class="users" /></td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Banana" data-uid="U0002" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Apple" data-uid="U0002" />
          </td>
          <td align="center">
            <input type="checkbox" name="fruits[]" value="Mangoes" data-uid="U0002" />
          </td>

          <tr>

            <td colspan=4>
              <input type="button" value="Submit" id="btnSubmit" />
            </td>
</table>
<div id="result"></div>

jQuery获取多个Checkbox值并存储到数据库

2 个答案: