Question

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

场景：如果我从 Permission1 取消选中 field3 并点击保存按钮，我想获取权限1的ID并更改名称属性错误的未选中复选框。我相信我可以更改name属性但是我在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。另外，我添加了名称属性更新。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

另一种方式就是这个。

$("#savePermissionTable").click(function() {
$("input[name='true']:not(:checked)").each(function() {
        var el = $(this).parents('tr')[0];
        $(this).prop("name",false);
        console.log($(el).prop('id'));
})
});

您可以在此Fiddle

中查看

jQuery：获取未经检查的表行的ID

2 个答案: