how to change checkbox to a validate icon in database?

when I tick the checkbox and click on the validate button, I want the checkbox to become an validation icon within the table like the example below. Hello, when I tick the checkbox and click on the validate button, I want the checkbox to become an validation icon within the table like the example below.

Here is my HTML:

<table class="table table-bordered" id="mytable">
  <tr>
    <th><input type="checkbox" id="check_all"></th>
    <th>matricule</th>
    <th>salary</th>
    <th>number day</th>
    <th>premium</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>5000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td>6000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>

  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>7000</td>
    <td>1</td>
    <td><input type="text" name="prime" class="form-control" 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>

Here is my JQuery:

$(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);
    }
  });

  $("#hide").click(function() {
    $("tr").each(function(i, r) {
      if (i > 0 && $(r).find("input").first().prop("checked")) {
      }
    });
  });
})

Answer

If i got you clearly , you want to replace the input checked to “validate icon” like ✔ so we will use jQuery replaceWith() Method and replace input to UTF-8 Miscellaneous Symbols : ✔

like:

$("#hide").click(function() {
    $("tr").each(function(i, r) {
      if (i > 0 && $(r).find("input").first().prop("checked")) {
        $(r).find("input").first().replaceWith('<span style="color: green;font-weight: bolder;">✔</span>');//✓ - 

      }
    });
  });

Advertisement

Answer