Javascript 选中复选框时如何全选
我有一个表格,我在其中填写了一些数据,并且在每个表格之外都有复选框,最后一个复选框是“全部”。 当我选中此“全部”复选框时,应选中其余复选框,反之亦然 填充数据的代码Javascript 选中复选框时如何全选,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,我有一个表格,我在其中填写了一些数据,并且在每个表格之外都有复选框,最后一个复选框是“全部”。 当我选中此“全部”复选框时,应选中其余复选框,反之亦然 填充数据的代码 <div class="tablecontatiner"> <table> <tr> <th>Function</th> <th>Add</
<div class="tablecontatiner">
<table>
<tr>
<th>Function</th>
<th>Add</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
<th>All</th>
</tr>
@foreach (var item in Model)
{
<tr class="grouprow">
<td><input type="hidden"/><input id="@(item.Func_Code)" type="checkbox" style="visibility:hidden" />@item.FunctionName</td>
<td><input id="@(item.Func_Code + "A")" type="checkbox" value="Add" @(item.Add==true?"checked":"") /></td>
<td><input id="@(item.Func_Code + "E")" type="checkbox" value="Edit" @(item.Edit==true?"checked":"") /></td>
<td><input id="@(item.Func_Code + "V")" type="checkbox" value="View" @(item.View==true?"checked":"")/></td>
<td><input id="@(item.Func_Code + "D")" type="checkbox" value="Delete" @(item.Delete==true?"checked":"")/></td>
<td><input id="@(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
</tr>
}
</table>
</div>
作用
添加
编辑
看法
删除
全部的
@foreach(模型中的var项目)
{
@item.FunctionName
}
我的UI看起来像:试试这个
$('#checkboxAll').on('change', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
if (!this.checked) {
$('#checkboxAll').prop('checked', false);
}
});
试试看
jQuery(function ($) {
//listen to the change of checkbox in the last td
$('.tablecontatiner td:last-child input').on('change', function () {
//update the checked property of all checkboxes in the same row as the changed checkbox
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
})
})
试试看
$('chkAll')。在('click',函数(){
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked',this.checked);
}); 安东的解决方案非常优雅。 如果您加载(或重新加载)表,并且不希望每次重新加载时都设置事件处理程序,那么我将稍微更改一下解决方案:
$('.tablecontatiner').on('change', '[id$=All]', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
备注:我也会给每个“全部”复选框设置“checkboxAll”类,因此它看起来像:
<input id="@(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>
什么是#chekcbox所有她…那个复选框的id?或值或复选框?本应选中/取消选中所有复选框的复选框Id尝试了您的演示…但当我选中任何一个复选框时,该复选框不起作用。所有复选框应取消选中,还有一种情况…当用户选中所有复选框时,“全部”复选框应该被选中。@Santosh如果你有另一个问题,请创建一个新问题。如果复选框被选中怎么办?“全部”复选框此时应该取消选中,当然,如果您更改它,它会因为您更改它而更改。所以你不应该用“全部”复选框做更多的事情。这就是为什么不应用(这个)过滤器的原因。试试我在答案中添加的jsbin示例。
$('.tablecontatiner').on('change', '.checkboxAll', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});