javascript - jQuery:获取未检查表行的ID

Question

我有一张带有复选框的表格。这是一种权限表。我想获取未选中复选框的行的 ID。

场景:如果我取消选中 Permission1 中的 field3 并点击保存按钮，我想获取 permission1 行的 ID 并更改名称属性未选中的复选框为 false。我相信我可以更改名称属性，但我在 console.log 中获取了所有行 ID。

这是我试过的:

    $("#savePermissionTable").click(function() {
      $("#permissionTable tr").each(function() {
        if($(this).find('input[type="checkbox"]
 [name="true"]:not(:checked)')){
        console.log($(this).attr('id'));
        }
      })
    })

HTML:

<table class="table">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th data-sortable="true">field 1</th>
      <th data-sortable="true">field 2</th>
      <th data-sortable="true">field 3</th>
    </tr>
  </thead>
  <tbody id="permissionTable">
    <tr id="1">
      <td>Permission 1</td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
    </tr>
    <tr id="2">
      <td>Permission 2</td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
    </tr>

  </tbody>
</table>

我尝试搜索不同的示例，但对未选中的复选框没有任何帮助。任何帮助我做错的事情都将不胜感激。

我的代码: Fiddle

Answer 1

一个选择器，当被传递到一个if 时将总是返回true。因此，改为使用 $(".selector").length。此外，我添加了名称属性更新。

$("#savePermissionTable").click(function() {
  $("#permissionTable tr").each(function() {
    var unchecked = $(this).find('input[type="checkbox"][name="true"]:not(:checked)');
    if (unchecked.length) {
      console.log($(this).attr('id'));
      unchecked.attr("name",false);
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<!--script src="https://raw.githubusercontent.com/719media/bootstrap-table/bootstrap4/src/bootstrap-table.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th data-sortable="true">field 1</th>
      <th data-sortable="true">field 2</th>
      <th data-sortable="true">field 3</th>
    </tr>
  </thead>
  <tbody id="permissionTable">
    <tr id="1">
      <td>Permission 1</td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
    </tr>
    <tr id="2">
      <td>Permission 2</td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
      <td>
        <input class="form-check-input" type="checkbox" name="true" checked>
      </td>
    </tr>

  </tbody>
</table>

<div class="text-right">
  <button type="button" class="btn btn-primary" id="savePermissionTable"> Save  </button>
</div>