我有下面的一个简单表格,并通过单击表格顶部的复选框来选择/取消选择所有复选框。
此外:当我单击第个复选框时,所有其他复选框都将被选中,当我再次单击第个框时,其他所有复选框都被取消选中。
问题是这样的:当所有复选框都被选中,我点击其中一个其他复选框时,它被取消选中,但第th个复选框也应该自动取消选中,这不会发生。
另一方面,当选中其中两个复选框,我点击最后一个复选框时,也应该选中第个复选框。
有人知道我如何在这个特定的代码中做到这一点吗?
这里的javascript:
// Select / deselect check boxes on free text search page.
jQuery(function($) {
// Select / deselect all rows according to table header checkbox.
var active_class = 'active';
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
var th_checked = this.checked; // Checkbox inside "TH" table header.
$(this).closest('table').find('tbody > tr').each(function(){
var row = this;
if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
});
});
// Select / deselect a row when the checkbox is checked / unchecked.
$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
var $row = $(this).closest('tr');
if(this.checked) $row.addClass(active_class);
else $row.removeClass(active_class);
});
});
这里是html:
<table id="simple-table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">
<label class="pos-rel">
<input class="ace" type="checkbox" />
<span class="lbl"></span>
</label>
</th>
<th>Areas:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">
<label class="pos-rel">
<input class="ace" name="ma1" type="checkbox" value="1" checked="" />
<span class="lbl"></span>
</label>
</td>
<td>
<span>Option 01</span>
</td>
</tr>
<tr>
<td class="center">
<label class="pos-rel">
<input class="ace" name="ma2" type="checkbox" value="1" />
<span class="lbl"></span>
</label>
</td>
<td>
<span>Option 02</span>
</td>
</tr>
<tr>
<td class="center">
<label class="pos-rel">
<input class="ace" name="ma3" type="checkbox" value="1" />
<span class="lbl"></span>
</label>
</td>
<td>
<span>Option 03</span>
</td>
</tr>
</tbody>
</table>
我试过让其他人添加以下代码,但没有任何效果:
var tr_checked = this.checked; // Checkboxes checked.
$(this).closest('table').find('tbody > tr').each(function(){
var row = this;
if(tr_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
});
如果你能帮助我使用这种方法使它发挥作用,我将不胜感激。
我会这样做。
var $thead = $('#simple-table thead');
var $tbody = $('#simple-table tbody');
// Event handler for the .ace checkbox inside <thead>.
$thead.find('.ace').change(function() {
if ($(this).prop("checked")) {
$tbody.find('.ace').prop("checked", true);
} else {
$tbody.find('.ace').prop("checked", false);
}
});
// Event handler for .ace checkboxes inside <tbody>.
$tbody.on("change", ".ace", function() {
if ($tbody.find('.ace:checked').length == $tbody.find('.ace').length) {
$thead.find('.ace').prop("checked", true);
} else {
$thead.find('.ace').prop("checked", false);
}
});
JSFiddle
您的代码似乎正在工作,至少在chrome中是这样。这是一把小提琴如果你想让主复选框按预期工作,我用一个工作示例改变了主意
if(this.checked) {
$row.addClass(active_class);
//check if all checkboxes are checked
if(table.find("tbody input[type=checkbox]:not(:checked)").length ==0){
headerCheckbox.prop('checked', true);
}
} else {
$row.removeClass(active_class);
headerCheckbox.prop('checked', false);
}