在codeigniter中通过ajax显示所有选中的复选框的总和

<form id="checkboxForm">
  <input type="checkbox" id="checkbox1" value="10"> Checkbox 1
  <input type="checkbox" id="checkbox2" value="20"> Checkbox 2
  <input type="checkbox" id="checkbox3" value="30"> Checkbox 3
  <input type="checkbox" id="checkbox4" value="40"> Checkbox 4
</form>

<div id="totalSum"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#checkboxForm input[type="checkbox"]').change(function() {
      // 发送Ajax请求
      $.ajax({
        url: "<?php echo base_url('controller/ajax_sum'); ?>",
        type: "POST",
        data: $('#checkboxForm').serialize(),
        success: function(response) {
          // 显示总和
          $('#totalSum').text("总和：" + response);
        }
      });
    });
  });
</script>

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Controller extends CI_Controller {
  public function ajax_sum() {
    // 获取复选框的值
    $checkbox1 = $this->input->post('checkbox1');
    $checkbox2 = $this->input->post('checkbox2');
    $checkbox3 = $this->input->post('checkbox3');
    $checkbox4 = $this->input->post('checkbox4');

    // 计算总和
    $totalSum = $checkbox1 + $checkbox2 + $checkbox3 + $checkbox4;

    // 返回总和
    echo $totalSum;
  }
}