我有一张带有复选框的表格。这是一种权限表。我想获取未选中复选框的行的 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> </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
最佳答案
一个选择器,当被传递到一个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> </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>
关于javascript - jQuery:获取未检查表行的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49213400/