根据单击复选框过滤数据

Posted 2023-02-24

【中文标题】根据单击复选框过滤数据

【英文标题】：Filtering data according to click of checkboxes

【发布时间】：2022-01-01 16:46:03

【问题描述】：

目前，我在 View 类中以表格格式显示所有数据。现在我在顶部有复选框，当用户进入页面时默认选中这些复选框。现在我想要它，以便当用户取消选中其中任何一个时，它应该向我的控制器发送一个 POST ajax 调用并从我的模型中删除该过滤器。为此，我使用以下代码：

查看类：

<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>

<?php if($properties) foreach($properties as $lead): ?>
<td><?php echo $lead['refno'] ?></td>
<?php endforeach;?>

<script>
$("input[name='matchfield']").change(function() 
    var matchfields = [];
    $.each($("input[name='matchfield']:checked"), function()
        matchfields.push($(this).val());
    ); 
     $.ajax(
         url: 'listings/edit/'+<?php echo $property->listingsid;?>,
         data :  selmatches : matchfields, clickmatches:'clicked' ,
         type: 'POST',
         beforeSend: function()
            $("#matchedleadscont").empty();
            $("#loader").show();
         ,             
         success: function (data) 
          $("#loader").hide();
            $("#matchedleadscont").html(data);
          
    ); 
);

控制器类：

if(isset($_POST["clickmatches"]) )
                if(in_array('community', $_POST["selmatches"]))
                    $propcommunity = $default_data[0]['community'];
                
                if(in_array('propsubcommunity', $_POST["selmatches"]))
                    $propsubcommunity = $default_data[0]['property_name'];
                
                if(in_array('bedrooms', $_POST["selmatches"]))
                    $propbeds = $default_data[0]['bedrooms'] ;
                
                if(in_array('unit_type', $_POST["selmatches"]))
                    $proptype = $default_data[0]['unit_type'];
                
            $edit['properties']=  $this->listings_model->load_leads($propcommunity, $propsubcommunity,$propbeds,$proptype);
                

模型类：

$this->db->select('*');
$this->db->from("table1");
if($community!='')
           $this->db->where('crm_data_table.community',$community); 
if($subcommunity!='')
           $this->db->where('crm_data_table.property_name',$subcommunity); 
if($proptype!='')
           $this->db->where('crm_data_table.unit_type',$proptype);
if($bedrooms!='')
           $this->db->where('crm_data_table.bedrooms',$bedrooms);
$query = $this->db->get();  
return $query->result_array();

但是当我更改我的复选框时，这并没有改变。我放了一个 var_dump($_POST["selmatches"]);死（）;和“clickmatches”，两者都给出了以下内容：

【参考方案1】：

我们可以简化jQuery

$("input[name='matchfield']").on("change", function() 
  const matchfields = $("input[name='matchfield']:checked").map(function() 
    return $(this).val()
  ).get();

  const data = 
    selmatches: matchfields,
    clickmatches: 'clicked'
  ;
  $.ajax(
     url: 'listings/edit/'+<?php echo $property->listingsid;?>,
     data : data,
     ...
  );
);

下面的代码得到

array(4)  [0]=> string(16) "propsubcommunity" [1]=> string(9) "community" [2]=> string(9) "unit_type" [3]=> string(8) "bedrooms" 
found community (if community is on)

PHP

<?php 

error_reporting(E_ALL);
header("Access-Control-Allow-Origin: *"); // if on another server

$selmatches = $_POST['selmatches'];

var_dump($selmatches);
if(in_array('community', $_POST["selmatches"]))
  echo "Found community";


?>

$("input[name='matchfield']").on("change", function() 
  const matchfields = $("input[name='matchfield']:checked").map(function() 
    return $(this).val()
  ).get();

  const data = 
    selmatches: matchfields,
    clickmatches: 'clicked'
  ;
  console.log(data)
  $.ajax(
    url: 'https://plungjan.name/SO/testAjaxArray/save.php',
    data: data,
    type: 'POST',
    success: function(data) 
      $("#matchedleadscont").html(data);
    
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span><input type="checkbox" id="propsubcommunity" name="matchfield" value="propsubcommunity" checked>
<label for="propsubcommunity">Sub-Community</label></span>
<span><input type="checkbox" id="community" name="matchfield" value="community" checked>
<label for="community">Community</label></span>
<span><input type="checkbox" id="proptype" name="matchfield" value="unit_type" checked>
<label for="proptype">Type (Villa, Apartment,etc)</label></span>
<span><input type="checkbox" id="propbeds" name="matchfield" value="bedrooms" checked>
<label for="propbeds">Beds</label></span>
<div id="matchedleadscont"></div>

【讨论】：

好的，所以我在控制器中创建了一个var_dump($selmatchesArray); die();，它给出了以下错误：imgur.com/a/CVFF2vN

【参考方案2】：

鉴于： 将name="matchfield" 更改为name="matchfield[]" ....

$("input[type='checkbox']").click(function() 
     $.ajax(
         url: 'listings/edit/'+<?php echo $property->listingsid;?>,
         data : $(form).serialize(),
         type: 'POST',
         beforeSend: function()
            $("#matchedleadscont").empty();
            $("#loader").show();
         ,             
         success: function (data) 
          $("#loader").hide();
            $("#matchedleadscont").html(data);
          
    ); 
);

在你的控制器中：

if(in_array('community', $_POST["matchfield"]))
    $propcommunity = $default_data[0]['community'];

【讨论】：

这不是必须的

@mplungjan 你是什么意思？

无需更改 ajax 中的匹配字段。 ajax 为 php 进行数组创建