如何将复选框更改为数据库中的验证图标？答案

【问题标题】：how to change checkbox to a validate icon in database?如何将复选框更改为数据库中的验证图标？
【发布时间】：2019-06-25 14:03:19
【问题描述】：

当我勾选复选框并单击验证按钮时，我希望复选框成为表格中的验证图标，如下例所示。您好，当我勾选复选框并单击验证按钮时，我希望复选框成为表格中的验证图标，如下例所示。

这是我的 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>

这是我的 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")) {
      }
    });
  });
})

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

如果我明白了，您想将 input checked 替换为“验证图标”，例如 ✔ 所以我们将使用jQuery replaceWith() 方法并将输入替换为UTF-8 Miscellaneous Symbols ：✔

喜欢：

$("#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>');//✓ - 

      }
    });
  });

【讨论】：