如何在CodeIgniter中使用HTML复选框修改数据库数据

问题根因 #

• 视图中调用了未定义的unveto()函数，且调用veto()时未传入必填的previewId参数，函数直接触发空值判断返回，没有执行后续逻辑
• 循环生成的复选框使用了重复的固定IDveto/unveto，导致DOM识别异常
• 未提供处理AJAX请求的previewFeedback控制器方法，同时如果CodeIgniter开启了CSRF防御，未携带CSRF令牌的POST请求会被直接拦截
• AJAX回调中获取的previewVeto元素在页面中不存在，回调逻辑无法正常执行

解决步骤 #

1. 修正视图复选框逻辑
   统一使用一个切换函数，传入对应ID和勾选状态，避免重复ID：

<?php foreach($previews as $thisPreview){ ?>
<form class="form-custom">
  <div class="col-12 col-md-4">
    <div class="item">
      <div class="item__header">
        <!-- 统一逻辑，避免两个函数，ID带预览ID保证唯一 -->
        <input 
          type="checkbox" 
          id="veto_<?= $thisPreview->preview_id ?>" 
          onclick="toggleVeto(<?= $thisPreview->preview_id ?>, this.checked)"
          <?= $thisPreview->veto ? 'checked' : '' ?>
        >
      </div>
      <div class="item__image">
        <img src="<?= $thisPreview->image_link ?>" alt="">
      </div>
      <div class="item__info">
        <h3 class="item__title"><?= $thisPreview->title ?></h3>
        <p class="item__person"><?= $thisPreview->customer_name ?></p>
      </div>
    </div>
  </div>
</form>
<?php } ?>

2. 替换JavaScript逻辑
   统一编写切换函数，补充CSRF令牌（如果开启）：

document.addEventListener('DOMContentLoaded',function(){
  // 可在此处统一绑定事件替代onclick，也可直接使用下方函数
});

function toggleVeto(previewId, isChecked) {
  if(!previewId) return;
  const baseURL = window.location.origin + "/myboxes";
  const controllerPath = baseURL + "/bobcatuser/previewFeedback";
  // 如果CI开启了CSRF，补充令牌，csrf名称可以在config配置文件中查看
  const csrfName = '<?= $this->security->get_csrf_token_name() ?>';
  const csrfHash = '<?= $this->security->get_csrf_hash() ?>';

  jQuery.ajax({
    type: 'POST',
    url: controllerPath,
    data: {
      previewId: previewId,
      vetoStatus: isChecked ? 1 : 0,
      [csrfName]: csrfHash // 携带CSRF令牌避免请求被拦截
    },
    dataType:'json',
    success: function(response){
      if(response.code == 200) {
        console.log('状态更新成功');
      }
    },
    error: function(xhr){
      console.log("更新失败：", xhr.responseText);
    }
  });
  return false;
}

3. 补充控制器处理方法
   在Bobcatuser控制器中添加previewFeedback方法处理AJAX请求：

public function previewFeedback() {
  // 验证登录状态
  if(!$this->session->userdata('logged_in_user')) {
    echo json_encode(['code' => 401, 'msg' => '未登录']);
    exit;
  }
  $previewId = $this->input->post('previewId');
  $vetoStatus = $this->input->post('vetoStatus');
  // 调用模型更新数据库对应字段
  $updateRes = $this->package->updateVetoStatus($previewId, $vetoStatus);
  if($updateRes) {
    echo json_encode(['code' => 200, 'msg' => '更新成功']);
  } else {
    echo json_encode(['code' => 500, 'msg' => '更新失败']);
  }
  exit;
}

4. 快速排查方法
   打开浏览器开发者工具的控制台和网络面板，点击复选框时查看是否有JS报错，是否发出了AJAX请求，请求返回的内容是什么，可以快速定位具体问题点。

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