Home » Jquery » javascript – how to change checkbox by icon validate

javascript – how to change checkbox by icon validate

Posted by: admin February 22, 2020 Leave a comment

Questions:

i have two forms, form1 contains the date and the display button, the show button allows you to hide the form1 and display the form2, the form2 contains the chosen date and a datatable with checkboxes ,I want when I display the table just the checkboxes that verify these two conditions become valid icon, not the table input.

index.php

<script type="text/javascript">
$(document).ready(function() {
  $('#check_all').on('click', function(e) {
    if ($(this).is(':checked', true)) {
      $(".checkbox").prop('checked', true);
    } else {
      $(".checkbox").prop('checked', false);
    }
  });
  $('.checkbox').on('click', function() {
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $('#check_all').prop('checked', true);
    } else {
      $('#check_all').prop('checked', false);
    }
  });
   $("#form2").hide();
  $("#hide").click(function(){
      $("#form1").hide();
      $("#form2").show();
      let dat = $("#dateS").val();
      $("#da").text(dat);
      $("tr").each(function(i, r) {
      let mat = $(r)[0].cells[2].innerText;
      for (var i = 0; i < 2; i++){
         if(dat=="2020-02-17" && mat == "52"){

            $(r).find("input").first().replaceWith('<span style="color: green;font-weight:  bolder;">✔</span>');
         //✓ - 
       }
         }
    });
    }); 
})
</script>
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
  <div class=" col-md-10 col-md-offset-1">
   <div class="form-group col-md-3">
    <label for="titre">date</label>
   </div>
   <div class="form-group col-md-5">
     <input type="date" name="dateS" id="dateS" class="form-control">
   </div>
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="form-group col-md-2">
     <button class="btn btn-primary" id="hide" data-url="">show</button>
    </div>
  </div>
</div>

<div id="form2">
  <div class="col-md-10 col-md-offset-1">
      <h4>dateS : <span id="da"></span></h4>
  </div>
<table class="table table-bordered" id="mytable">
  <tr>
    <th><input type="checkbox" id="check_all"></th>
    <th>nom</th>
    <th>matricule</th>
    <th>adresse</th>
    <th>prime</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>najib</td>
    <td>52</td>
    <td>tihit</td>
    <td><input type="text" name="prime" class="form-control prime" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>adil</td>
    <td>62</td>
    <td>tagmast</td>
    <td><input type="text" name="prime" class="form-control prime" value="0"></td>
  </tr>
</table>
<div class="form-group col-md-offset-5 ">
  <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>
</div>
How to&Answer: