jeudi 8 décembre 2022

Get Check, Uncheck status of Checkboxes from html table

HTML:

<table class="table table-sm table-striped table-bordered table-hover" id="boflogbook">
             <thead>
              <!--<tr>
                <th colspan="12"><input type="submit" name="updateBtn" value="Submit"></th>
              </tr>-->
              <tr>
                <!--<th align="center"><input type="checkbox" id="selectall" onClick="selectAll(this)"></th>-->
                <th style="display:none;">ID</th>
                <th>Department</th>
                <th>Issue Name</th>
                <th>Released</th>
                <th>Completed</th>
                <th>Action</th>
              </tr>
             </thead>
             <tbody id="tableData">
             </tbody>
          </table>

Jquery:

<script type="text/javascript">
  $(document).ready(function(){
      getAllIssues();

    function getAllIssues(){
     $.ajax({
        url: "getalldicsectissues.php",
        type: "POST",
        dataType: "json",
        success: function (res){
          getAllIssueRecords(res.data);
        }
     });
    }   
    function getAllIssueRecords(response){
        var data="";
        $.each(response,function(index,value){
            data +="<tr>";
            //data +="<td>"+"<input type='checkbox' id='chkbx' name='chkbx[]'>"+"</td>";
            data +="<td style='display:none;'>"+value.id+"</td>";
            data +="<td>"+value.dept_name+"</td>";
            data +="<td>"+value.issue_short+"</td>";                        
            if(value.visible_to==1)
                data +="<td>"+"<input type='checkbox' id='visible_to' name='visible_to' checked>"+"</td>";
            else
                data +="<td>"+"<input type='checkbox' id='visible_to' name='visible_to' >"+"</td>";
            
            if(value.iscompleted==1){
                data +="<td>"+"<input type='checkbox' id='iscompleted' name='iscompleted' checked>"+"</td>";
            }               
            else{
                data +="<td>"+"<input type='checkbox' id='iscompleted' name='iscompleted'  >"+"</td>";
            }           
            data +="<td data-attr="+value.id+"><a class='btn-warning btnEdit' id='edit'><i class='fa-solid fa-pen-to-square'></i></a>";
            data +="</tr>";
        });
        $("#tableData").html(data);
    }
    
  $(document).on("click",".btnEdit",function(){
      visible_to=$('input:checkbox[name=visible_to]').is(':checked');
      if(visible_to==true)
          visible_to=1;
      else
          visible_to=0;
          
      iscompleted=$('input:checkbox[name=iscompleted]').is(':checked');
      if(iscompleted==true)
          iscompleted=1;
      else
          iscompleted=0;
          
      console.log(dept_name);
      console.log(issue_short);
      console.log(visible_to);
      console.log(iscompleted);
      console.log(issue_id);
      
      $.ajax({
      url: "updatereleasecomplete.php",
      type: "POST",
      data:{issue_id:issue_id,dept_name:dept_name,issue_short:issue_short,visible_to:visible_to,iscompleted:iscompleted},
      success: function (res) {   
           if(res==100){
               toastr.success('Record updated.');
               getAllIssues();
           }
           else{
               toastr.error('Record could not be updated.');
               getAllIssues();             
           }
      },
    });     
  }); 
 });
</script>

I am unable to get correct checkbox status: whether checked or unchecked. Case 1: When both the checkboxes are unchecked and button is clicked, 1 and 0 is printed on console. Case 2: When both the checkboxes are checked and button is clicked, 1 and 1 is printed on console. Case 3: When first box is unchecked and second is checked, 1 and 1 printed on console.

Kindly help to resolve the above problems.




Aucun commentaire:

Enregistrer un commentaire