选择复选框!==选择行表 [英] Select Checkbox !== Select Row Table
本文介绍了选择复选框!==选择行表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
select/unselect
按钮在该复选框上起作用.
但是它不适用于行表.
//Select row table
$('#example').on('click', 'tr', function() {
var $row = $(this),
isSelected = $row.hasClass('selected')
$row.toggleClass('selected')
.find(':checkbox').prop('checked', !isSelected);
});
// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
var selectAll = this.id === 'selectAll';
$("#example tr :checkbox").prop('checked', selectAll);
});
我认为清单仅是用于显示,用于选定的行并对其进行标记.
I think the checklist is just for display, for row selected and to mark it.
单击选择/取消选择按钮时的方式,
How when the select / unselect button is clicked,
在行上选择 表格,不仅在复选框上?
it select on row table too, Not just on the checkbox?
您可以查看是否单击了行表.
You can see if you click the row table.
代码段演示:
$('#example').dataTable();
//Select row table
$('#example').on('click', 'tr', function() {
var $row = $(this),
isSelected = $row.hasClass('selected')
$row.toggleClass('selected')
.find(':checkbox').prop('checked', !isSelected);
});
// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
var selectAll = this.id === 'selectAll';
$("#example tr :checkbox").prop('checked', selectAll);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<button type="button" id="selectAll"> Select </button>
<button type="button" id="unselectAll"> UnSelect </button>
<table id="example" class="myclass" />
<thead>
<tr>
<th>
</th>
<th>Name</th>
<th>Company</th>
<th>Employee Type</th>
<th>Address</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Calvin</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Ananda</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>John</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Doe</td>
<td>TCS</td>
<td>IT</td>
<td>San Francisco</td>
<td>US</td>
</tr>
</tbody>
推荐答案
One way to do it is to call .toggleClass()
on the rows providing the second argument that says whether to add or remove the class:
$("#example tr").toggleClass("selected", selectAll)
.find(":checkbox").prop('checked', selectAll);
已添加到您的演示中:
$('#example').dataTable();
//Select row table
$('#example').on('click', 'tr', function() {
var $row = $(this),
isSelected = $row.hasClass('selected')
$row.toggleClass('selected')
.find(':checkbox').prop('checked', !isSelected);
});
// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
var selectAll = this.id === 'selectAll';
$("#example tr").toggleClass("selected", selectAll)
.find(":checkbox").prop('checked', selectAll);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<button type="button" id="selectAll"> Select </button>
<button type="button" id="unselectAll"> UnSelect </button>
<table id="example" class="myclass" />
<thead>
<tr>
<th></th><th>Name</th><th>Company</th><th>Employee Type</th><th>Address</th><th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td><td>Calvin</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Ananda</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>John</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Doe</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
</tr>
</tbody>
这篇关于选择复选框!==选择行表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文