当我使用jQuery单击“选择”按钮时，如何选中所有复选框 [英] How do I select all check box when I click on Select button using jQuery
问题描述
我有HTML页面，它有多个复选框，可以单独检查。我有按钮选择，所以我想做的是。当我点击选择时，所有复选框都应该被选中，并取消选中。
I have HTML page which have multiple check boxes and individually they can be checked. I have button select, so what I am suppose to do is. When I click on select all the check boxes should get selected, and deselected.
Html
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#selectAll').click(function(event) { //on click
if(this.checked) { // check select status
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
</script>
<table id="example" cellspacing="0" width="20%">
<thead>
<tr>
<th><button type="button" id="selectAll" class="myClass">Select</button></th>
<th>number</th>
<th>company</th>
<th> Type</th>
<th> Address</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>1</td>
<td>APPLE</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>2</td>
<td>DELL</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>3</td>
<td>Amazon</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>4</td>
<td>Microsoft</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
</tbody>
</body>
</html>
输出
在图像中我有选择按钮。我想要的是当我点击选择按钮时，所有复选框都应该被选中
In the image I have select button. what I want is when I click on select button all the check boxes should get selected
推荐答案
#selectAll 是一个按钮，它没有已检查属性，但可以使用数据属性来模拟它。
#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.
其次， .btn-chk 也不是复选框，因此无法检查，您必须定位复选框
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
这篇关于当我使用jQuery单击“选择”按钮时，如何选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
