有没有办法在一个数据库列中存储多个选中的复选框值？ [复制]答案

【问题标题】：Is there a way to store multiple selected checkbox values in one database column? [duplicate]有没有办法在一个数据库列中存储多个选中的复选框值？ [复制]
【发布时间】：2022-01-22 12:15:46
【问题描述】：

我正在从事一个个人项目，我有一个带有复选框的图像网格，并想在我的数据库中插入复选框的值，但不知道如何去做。我成功地在我的数据库中插入了一个值，但是当它达到两个或更多时，它只显示第一个。

我的复选框网格：

/* Responsive layout - makes a two column-layout instead of four columns */

@media (max-width: 800px) {
  .row {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1%;
    align-items: start;
  }
}

.gridlabel {
  font-size: 10px;
  margin-top: 70px;
  color: #FFFFFF;
  position: absolute;
  font-weight: 900;
}

.gridlabelg {
  text-align: center;
  margin-left: 12px;
  font-size: 10px;
  margin-top: 60px;
  color: #FFFFFF;
  position: absolute;
}

ul {
  list-style-type: none;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

li {
  display: inline-grid;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

.lblimgs {
  border: 1px solid #fff;
  padding: 0px;
  display: grid;
  position: relative;
  margin: 2px;
  cursor: pointer;
}

.lblimgs:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 30%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

.lblimgs img {
  height: 100px;
  width: 144px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  border-radius: 10px;
}

 :checked+.lblimgs {
  border-color: #ddd;
}

 :checked+.lblimgs:before {
  content: "✓";
  background-color: rgb(173, 168, 168);
  transform: scale(1);
}

 :checked+.lblimgs img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}

<div class="images">
  <ul>
    <li><input type="checkbox" id="cb1" name="hotel" value="casamontanha" />
      <label for="cb1" class="lblimgs"><img src="pictures/casamontanha.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb2" name="hotel" value="fillitheyo" />
      <label for="cb2" class="lblimgs"><img src="pictures/filitheyo.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb3" name="hotel" value="hardrock" />
      <label for="cb3" class="lblimgs"><img src="pictures/hardrock.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb4" name="hotel" value="rioquente" />
      <label for="cb4" class="lblimgs"><img src="pictures/rioquente.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb5" name="hotel" value="sheraton" />
      <label for="cb5" class="lblimgs"><img src="pictures/sheraton.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb6" name="hotel" value="apart" />
      <label for="cb6" class="lblimgs"><img src="pictures/apart.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb7" name="hotel" value="lecanton" />
      <label for="cb7" class="lblimgs"><img src="pictures/lecanton.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb8" name="hotel" value="pestana" />
      <label for="cb8" class="lblimgs"><img src="pictures/pestana.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb9" name="hotel" value="catello" />
      <label for="cb9" class="lblimgs"><img src="pictures/catello.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb10" name="hotel" value="wishnatal" />
      <label for="cb10" class="lblimgs"><img src="pictures/wishnatal.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb11" name="hotel" value="malta" />
      <label for="cb11" class="lblimgs"><img src="pictures/malta.jpg" /></label>
    </li>
    <li><input type="checkbox" id="cb12" name="hotel" value="lhc" />
      <label for="cb12" class="lblimgs"><img src="pictures/lhc.jpg" /></label>
    </li>
  </ul>
</div>

我试图做类似的事情：

$cb1=$_POST['hotel'];  
$cbx1="";  
foreach($checkbox1 as $cbx1)  
   {  
      $cb1 .= $cbx1.",";  
   }

编程新手，请谅解！

【问题讨论】：

最简单的方法是使用formData，但由于不使用form，需要在JS代码中进行一些DIY
使用数组作为复选框 pls 。所以使用 name=hotel[]

标签： javascript php html

【解决方案1】：

是的，但请不要！当您尝试查询特定数据时，这迟早会导致大量性能问题。请参阅此以获取更多信息。 https://en.wikipedia.org/wiki/Database_normalization。但是，如果您真的想要，您可以将所有内容放入一个数组中，在阅读时使用json_encode(...) 和json_decode(...) 对其进行字符串化。有时，如果您从不打算查询它或者这些值仅用于长时间存储或可能是日志，这可能是有意义的。

我曾经参与过一个项目，其中一些页面的加载时间由于一些类似的实现而飙升至超过 2 分钟，我们不得不投入数周时间来尝试通过缓存页面并采取各种变通办法来解决这个问题。经验教训：坚持最佳做法并花时间为您的数据创建列。

// get your data into an array like this
$data = ['cb1' => true, 'cb2' => false]; // ... with the rest of the checkboxes

// transform to json
// this will return a string which you can then save into you database
$str = json_encode($data)

// when you read the data from the database you do the opposite
// then you get back the array with your key-value pairs
$data2 = json_decode($str)

【讨论】：

这是一个非常简单的应用程序，我真的很想这样做。感谢您的链接，将研究这个！
在这种情况下不会有问题。我将在我的答案中添加一个示例。

【解决方案2】：

是的，但请不要。迟早你会想要改变一些东西，你的数据要么变得无用，要么变得失控，两者都无法管理。（我从文森特门泽尔的回答中借用了这个措辞。）

您可以将真/假值存储为整数中的位。您将“cb”数视为 2 的指数，因此“cb1”变为 2¹，“cb3”变为 2³，以此类推。这不漂亮，你开始很快得到大量。您“只有”12 个复选框“很好”，因为根据您的数据库，普通整数将是 32 位或 64 位，但这是有代价的。如果删除“cb8”怎么办？你被那一点困住了。如果你添加一个新的复选框，你就会添加一个新的位，因为你不想将新的复选框与任何旧的复选框混淆。对于一个小项目来说，这似乎是一个好主意，但是当在一个有多个开发人员的大型项目上尝试它时，它就变成了不好的做法，而且没有人知道这些位的含义。而且你在 2 年内可能也不知道这些位的含义，即使是在你自己的项目中。

最佳做法是让每个数据点（在本例中为布尔值）都有自己的列。这样您就可以确切地知道这些列的含义。或者至少你可以更容易地记录它。如果您删除一个复选框并且不想回头查看数据，您可以删除该列。一个新的复选框得到一个新的列。是的，这仍然在增长，数据变得无用，但它不再难以管理。

【讨论】：