javascript - mySqli php - 用户将多选复选框输入到 1 条记录中

Question

这里是初学者。我有一个很好的 mysqli 用户输入到人们填写表格的地方，它被输入到我的数据库中。

例如我正在使用

$category = $_POST['category'];

和

<input type="text" name="category" required placeholder="categories">

而且效果很好!

所以.. 我有一个记录，它是一个复选框的下拉列表，因此用户可以选择多个答案。看起来像这样

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
       <select>
          <option>Select an option</option>
         </select>
         <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
           <label for="one"><input type="checkbox" id="one" />First checkbox</label>
           <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
           <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
         </div>
        </div>
       </form>

1. 我该如何使用

   $choices = $_POST['choices'];

连接到用户选择的多个选项。

2.我如何命名上面的表格，以便我可以插入(选择)值($选择)

1. 我想它应该输入到我的数据库中，用逗号分隔，(choice1, choice2, choice3)

附加信息我不得不使用 JS 和 CSS 来创建下拉复选框。

              <style>
                      .multiselect {
                        width: 200px;
                      }
                      .selectBox {
                        position: relative;
                      }  
                      .selectBox select {
                        width: 100%;
                        font-weight: bold;
                      }
                      .overSelect {
                        position: absolute;
                        left: 0; right: 0; top: 0; bottom: 0;
                      }
                      #checkboxes {
                        display: none;
                        border: 1px #dadada solid;
                      }
                      #checkboxes label {
                        display: block;
                      }
                      #checkboxes label:hover {
                        background-color: #1e90ff;
                      }

                      </style>
                  Category:
                  <form>
                    <div class="multiselect">
                      <div class="selectBox" onclick="showCheckboxes()">
                        <select>
                          <option>Select an option</option>
                        </select>
                        <div class="overSelect"></div>
                      </div>
                      <div id="checkboxes">
                        <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                        <label for="two"><input type="checkbox" id="two" />Second checkbox</label>
                        <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
                      </div>
                    </div>
                  </form>

                  <script>
                    var expanded = false;
                    function showCheckboxes() {
                      var checkboxes = document.getElementById("checkboxes");
                      if (!expanded) {
                        checkboxes.style.display = "block";
                        expanded = true;
                      } else {
                        checkboxes.style.display = "none";
                        expanded = false;

                        }
                    }
                  </script>

Answer 1

“id”属性只被 CSS 和 javascript 用来引用特定的元素。你在这里想要的是给元素一个名字。像这样:

<div id="checkboxes">
     <label for="one"><input type="checkbox" name="one" id="one" />First checkbox</label>
     <label for="two"><input type="checkbox" name="two" id="two" />Second checkbox</label>
    <label for="three"><input type="checkbox" name="three" id="three" />Third checkbox</label>
</div>

然后您可以在 $_POST 中检查 $_POST['one'] 或 $_POST['two'] 或 $_POST['three']。它们应该完全缺失(使用 isset())或者应该作为值“on”发布

if (isset($_POST['one']) && $POST['one'] === "on"){
   // do stuff for checkbox one
}