Laravel中如何关联插入复选框与对应输入字段的数据？

一、前端调整：关联字段命名+显示隐藏逻辑 #

当前表单的输入字段命名（txt_win[]、txt_loss[]）会导致提交后无法直接对应到具体的格斗风格，需要调整命名规则，让每个格斗风格的三个输入框与复选框值绑定，同时完善显示隐藏的交互逻辑。

修改后的HTML示例（含多个格斗风格） #

<div class="form-check">
  <input class="form-check-input fighting_style" name="selected_styles[]" type="checkbox" value="MMA" id="MMA">
  <label class="form-check-label" for="MMA">MMA</label>

  <section class="fighiting_value" id="MMA_input" style="display: none;">
    <div class="row">
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">WIN</label>
          <input type="text" class="form-control fights txt_win" name="fights[MMA][win]" onblur="totalFights()" placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">LOSS</label>
          <input type="text" class="form-control fights txt_loss" data-points="75" name="fights[MMA][loss]" onblur="totalFights()" placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">DRAW</label>
          <input type="text" class="form-control fights txt_draw" data-points="150" name="fights[MMA][draw]" onblur="totalFights()" placeholder="">
        </div>
      </div>
    </div>
  </section>
</div>

<!-- 新增格斗风格示例，方便扩展 -->
<div class="form-check">
  <input class="form-check-input fighting_style" name="selected_styles[]" type="checkbox" value="Boxing" id="Boxing">
  <label class="form-check-label" for="Boxing">Boxing</label>

  <section class="fighiting_value" id="Boxing_input" style="display: none;">
    <div class="row">
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">WIN</label>
          <input type="text" class="form-control fights txt_win" name="fights[Boxing][win]" onblur="totalFights()" placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">LOSS</label>
          <input type="text" class="form-control fights txt_loss" data-points="75" name="fights[Boxing][loss]" onblur="totalFights()" placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">DRAW</label>
          <input type="text" class="form-control fights txt_draw" data-points="150" name="fights[Boxing][draw]" onblur="totalFights()" placeholder="">
        </div>
      </div>
    </div>
  </section>
</div>

显示隐藏的JavaScript逻辑 #

// 监听所有格斗风格复选框的切换事件
document.querySelectorAll('.fighting_style').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 根据复选框value匹配对应输入区域
    const inputSection = document.getElementById(`${this.value}_input`);
    if (this.checked) {
      inputSection.style.display = 'block';
    } else {
      inputSection.style.display = 'none';
      // 可选：取消勾选时清空输入框
      inputSection.querySelectorAll('input').forEach(input => input.value = '');
    }
  });
});

二、后端处理：接收关联数据并插入数据库 #

以PHP为例，接收表单提交的selected_styles（勾选的格斗风格）和fights（对应胜负平数据），遍历数据插入数据库，必须使用预处理语句防止SQL注入。

PHP代码示例 #

<?php
// 数据库连接信息
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_dbname";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $selectedStyles = $_POST['selected_styles'] ?? [];
  $fightsData = $_POST['fights'] ?? [];

  // 预处理插入语句
  $stmt = $conn->prepare("INSERT INTO fighting_records (style, win, loss, draw) VALUES (?, ?, ?, ?)");
  $stmt->bind_param("siii", $style, $win, $loss, $draw);

  // 遍历勾选的格斗风格，插入对应数据
  foreach ($selectedStyles as $style) {
    $win = isset($fightsData[$style]['win']) ? intval($fightsData[$style]['win']) : 0;
    $loss = isset($fightsData[$style]['loss']) ? intval($fightsData[$style]['loss']) : 0;
    $draw = isset($fightsData[$style]['draw']) ? intval($fightsData[$style]['draw']) : 0;

    $stmt->execute();
  }

  $stmt->close();
  $conn->close();
  echo "数据插入成功";
}
?>

数据库表结构参考 #

建议创建如下存储表：

CREATE TABLE fighting_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  style VARCHAR(50) NOT NULL,
  win INT DEFAULT 0,
  loss INT DEFAULT 0,
  draw INT DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

内容的提问来源于stack exchange，提问作者MM_Chanchal