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

Question

我正在做的是我有一个下拉列表 onchange 我的第一个 ajax 正在运行。 Onchange ajax 获取所有服务及其成本。第一个ajax运行良好。现在我在用户可以选择多个复选框的所有服务之前有一个复选框。选中复选框我的 secong ajax 正在运行。我想要的是选中复选框我想要所有选中复选框的总和，但它显示 jst 价格而不是所有选中的总和。请看代码。

我的 ajax 是：

   <script>
    $(document).ready(function(){
      $('#serv_pack').change(function(){  
      $.ajax({
              type: "POST",
              url: "<?php echo base_url(); ?>admin/pages/create_package",
              data: { 'serv_package' : $('#serv_pack').val() },
              success: function(data) 
              { 
              $('#ser_pac').html(data).addClass("md-card");
              },
               });
      });
      $(document).on('click','.check_price',function() {
      $.ajax ({
              type: "POST",
              url: "<?php echo base_url(); ?>admin/pages/check_price",
              data: { 'checked_price[]' : $(this).val() },
              success: function(data) 
              {
                  $('#ser_pac1').html(data).addClass("md-card");
              },
          });
      }); 
    });
  </script>

我的 html 是：

<div class="uk-grid" data-uk-grid-margin="">
    <div class="uk-width-large-1-2 uk-width-medium-1-2">
      <label for="service_title">Select Service Type<span class=
      "req">*</span></label> <select data-md-selectize="" id="serv_pack" name=
      "service_type" required="">
        <option value="">
          Service Types
        </option><?php foreach ($ser_type->result() as $catt){?>
        <option value="<?php echo $catt->tenure_name; ?>">
          <?php echo $catt->tenure_name; ?>
        </option><?php } ?>
      </select>
    </div>
  </div>
  <div class="md-card-content">
    <table cellspacing="0" class="uk-table" id="ser_pac" width="100%">
    </table><span id="ser_pac1"></span>
  </div>

我的控制器是

public function create_package() {
    $service_type = $this->input->post('serv_package');
    $this->load->model('home/Home_model');
    $types = $this->Home_model->get_service_type($service_type);
    $theader = '';
    $theader. = "<th> Service Title </th>";
    $theader. = "<th> Price </th>";
    $tbody = "<tbody>";
    foreach($types->result() as $typo) {
        $se_ty = $typo->service_type_cost;
        $se_ty1 = $typo->service_cost;
        $se_arr1 = explode(",", $se_ty);
        $ser_ar = explode(",", $se_ty1);
        for ($i = 0; $i < count($se_arr1); $i++) {
            if ($se_arr1[$i] == $service_type) {@
                $price = $ser_ar[$i];
                $service_title = $typo->service_title;
                $service_id = $typo->id;
                $tbody. = "<tr>";
                $tbody. = "<td> <input type=checkbox  value='$price' class='check_price' id='".$service_id.
                "'> ".$service_title.
                "</td>";
                $tbody. = "<td> $ &nbsp".$price.
                "</td>";
                $tbody. = "</tr>";
            }
        }
        echo '<input type="hidden" value="'.$service_title.
        '" name="ser_tit[]">';
    }
    $tbody. = "<tr>";
    $tbody. = "</tr>";
    $tbody. = "</tbody>";
    $table = '<table>'.$theader.$tbody.
    '<br></table>';
    echo $table;
}

public function check_price() {
    $prr = $this->input->post('checked_price');
    $text = $this->input->post('checked_val');
    foreach($prr as $pr1) {
        $sum = 0;
        $sum += $pr1;
        echo '<span><b>Total Cost</b></span>';
    }
    echo $sum;
}

请帮我做这件事......我真的很困惑。第二个ajax的问题​​

Answer 1

您只发送当前选中复选框的值，而是查找所有选中的项目并发送其值

$(document).on('click', '.check_price', function() {
  var checked = $('.check_price:checked').map(function() {
    return this.value;
  }).get();
  $.ajax({
    type: "POST",
    url: "<?php echo base_url(); ?>admin/pages/check_price",
    data: {
      'checked_price[]': checked
    },
    success: function(data) {
      $('#ser_pac1').html(data).addClass("md-card");
    },
  });
});