如何合并复选框和日期选择器的结果

Question

我想选择复选框并显示选定日期之间的结果。 复选框应通过合并查询从数据库中获取结果。 当我单击复选框时，它应该与“提交”按钮连接并去查询，我有复选框和日期时间选择器。 如何显示特定已选中复选框的结果。 按选择的日期排序这是我的代码

view.php

<div class="col-md-3">
<h5>Started Date</h5>
<input type="date" name="from_date" id="from_date" class="form-control">
</div>
<div class="col-md-3">
<h6>End Date</h6>
<input type="date" name="to_date" id="to_date" class="form-control">
</div>
<div style="clear:both"></div>
<br/>
</div>
<form id="frm1" method="post">
  <p>&nbsp;</p>
  <div class="dropdown" id="district">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select District
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <font color="black">
  <label>
      <input type="checkbox" name="check2"class="check2" id="checkAll2"> Check All
    </label>
    <label><input type="checkbox" class="check2" name="check2" id="check2" >Sheikhupura</label>
       <label><input type="checkbox" class="check2"name="check2" id="check2">Pakpattan </label>
      <label><input type="checkbox" class="check2"name="check2" id="check2">Okara</label>
     <label><input type="checkbox" class="check2"name="check2" id="check2">Nankana</label>


  </ul>
</div>

</form>

<script>
$(document).ready(function(){
    $.datepicker.setDefaults({
        dateFormat:'yy-mm-dd'
    });
    $(function(){
        $("#from_date").datepicker();
        $("#to_date").datepicker();
        $("#check2").checkbox();

    });
    $('#submit').click(function(){
        var from_date =$('#from_date').val();
        var to_date =$('#to_date').val();
        var check2 =$('#check2').val();

        if(from_date != '' && to_date !=''&&check2 !='')
        {
            $.ajax({
                url:"view.php",
                method:"POST",
                data:{from_date:from_date,to_date:to_date,check2:check2},
                success:function(data)
                });
        }else{
            alert("Please Select Date");
        }
    });

});
</script>

Answer 1

 $("input.check2").click(function(){ $('#submit').click(); }); $('#submit').click(function(){ var from_date =$('#from_date').val(); var to_date =$('#to_date').val(); var selectCheckboxes = []; $('#check2').each(function(){ if($(this).is(":checked")) { selectCheckboxes[] = $(this).val(); } }); var check2 = selectCheckboxes.join(); }); 

Answer 2

如果您想知道选中了哪些复选框，则可以执行以下操作（删除重复的ID，并为每个复选框指定唯一的名称）：

 document.querySelector(`input[type="submit"]`).addEventListener( "click", e=>{ e.preventDefault(); console.log( Array.from(document.querySelectorAll(`input[type="checkbox"]`)).map( input=>[input.checked,input.name] ) .filter(([checked])=>checked) .map(([c,name])=>name) ); } ) 

 <form method="get"> <label><input type="checkbox" class="check2" name="Sheikhupura" >Sheikhupura</label> <label><input type="checkbox" class="check2"name="Pakpattan" >Pakpattan </label> <label><input type="checkbox" class="check2"name="Okara" >Okara</label> <label><input type="checkbox" class="check2"name="Nankana" >Nankana</label> <input type="submit"> </form>