jQuery Jquery选择表中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19164816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery select all checkboxes in table
提问by Snowburnt
I have a script that should check all the checkboxes in a table. It checks them all the first time, it unchecks them after that. However, when I try to recheck them nothing happens.
我有一个脚本应该检查表中的所有复选框。它第一次检查它们，然后取消它们。但是，当我尝试重新检查它们时，没有任何反应。
the jquery:
jQuery：
$('#selectAll').click(function(e){
var table= $(e.target).closest('table');
$('td input:checkbox',table).attr('checked',e.target.checked);
});
the HTML:
HTML：
<table>
<tr>
<th>
<input type="checkbox" id="selectAll" />
</th>
<th>
hi!
</th>
</tr>
<tr>
<td>
<input type="checkbox" id="1"/>
</td>
<td>
hi!
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="2"/>
</td>
<td>
hi!
</td>
</tr>
</table>
here's a fiddle of the behavior:
这是行为的小提琴：
Why is it not working after being clicked once?
为什么单击一次后不起作用？
回答by Arun P Johny
回答by The Java Guy
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</HEAD>
<BODY>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
oTable = $('#datatable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
$("#selectall").click(function () {
var checkAll = $("#selectall").prop('checked');
if (checkAll) {
$(".case").prop("checked", true);
} else {
$(".case").prop("checked", false);
}
});
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").prop("checked", true);
} else {
$("#selectall").prop("checked", false);
}
});
} );
</script>
回答by ykosinets
Simple jQuery solution, with detection of checked inputs inside of the table, and state change for main (selectAll) checkbox:
简单的 jQuery 解决方案，检测表内已选中的输入，以及主 (selectAll) 复选框的状态更改：
$(document).ready(function() {
var $selectAll = $('#selectAll'); // main checkbox inside table thead
var $table = $('.table'); // table selector
var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body
var tdCheckboxChecked = 0; // checked checboxes
// Select or deselect all checkboxes depending on main checkbox change
$selectAll.on('click', function () {
$tdCheckbox.prop('checked', this.checked);
});
// Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
$tdCheckbox.on('change', function(e){
tdCheckboxChecked = $table.find('tbody input:checkbox:checked').length; // Get count of checkboxes that is checked
// if all checkboxes are checked, then set property of main checkbox to "true", else set to "false"
$selectAll.prop('checked', (tdCheckboxChecked === $tdCheckbox.length));
})
});table {
width: 100%;
border-collapse: collapse;
border: 2px solid #222;
}
table tr th {
background: #333;
color: #eee;
}
table tr:nth-child(odd) td {
background: #ececec;
}
td, th {
padding: 10px 14px;
text-align: center;
border: none;
}
.checkbox {
position: relative;
}
.checkbox [type="checkbox"] {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.checkbox [type="checkbox"] + label {
position: relative;
display: block;
width: 20px;
height: 20px;
border: 2px solid;
cursor: pointer;
border-radius: 2px;
will-change: color;
transition: .2s color ease-in-out;
}
table thead .checkbox [type="checkbox"] + label:hover,
table thead .checkbox [type="checkbox"] + label:hover:after {
color: #d80;
}
table tbody .checkbox [type="checkbox"] + label:hover,
table tbody .checkbox [type="checkbox"] + label:hover:after {
color: #8d0;
}
.checkbox [type="checkbox"] + label:after {
content: '';
position: absolute;
width: 5px;
height: 12px;
top: 50%;
left: 50%;
border-bottom: 2px solid;
border-right: 2px solid;
margin-top: -2px;
opacity: 0;
transform: translate(-50%, 0%) rotate(45deg) scale(.75);
will-change: opacity, transform, color;
transition: .17s opacity ease-in-out, .2s transform ease-in-out, .2s color ease-in-out;
}
.checkbox [type="checkbox"]:checked + label:after {
opacity: 1;
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>
<div class="checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</div>
</th>
<th>Email</th>
<th>Join date <i class="arrow bottom"></i></th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox1">
<label for="tr-checkbox1"></label>
</div>
</td>
<td>[email protected]</td>
<td>21 Oct, 2016 at 11:29 pm</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox2">
<label for="tr-checkbox2"></label>
</div>
</td>
<td>[email protected]</td>
<td>03 Mar, 2018 at 08:36 am</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox3">
<label for="tr-checkbox3"></label>
</div>
</td>
<td>[email protected]</td>
<td>11 Jan, 2020 at 01:47 am</td>
</tr>
</tbody>
</table>回答by Shen
This might be useful on the difference between prop() and attr(). Note this line in this article .prop() vs .attr():
这可能对 prop() 和 attr() 之间的差异有用。请注意本文.prop() 与 .attr() 中的这一行：
"The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute tells you nothing about the whether the checkbox on the page is checked."
“属性值反映的是默认状态而不是当前可见状态（除了在一些旧版本的 IE 中，因此使事情变得更加困难）。该属性不会告诉您页面上的复选框是否被选中。”
So in general, use prop() instead of attr().
所以一般来说，使用 prop() 而不是 attr()。
回答by Aashis Binod Khanal
Just in case there is <tbody>within the <table>, finding <td>to closet table doesn't work.
万一有<tbody>内<table>，寻找<td>到衣柜，茶几，不工作。
It worked with me like this:
它像这样和我一起工作：
$(document).ready(function() {
$('#selectAll').click(function(e){
$(this).closest('tbody').find('td input:checkbox').prop('checked', this.checked);
});
});
