当我使用jQuery单击选择按钮时，如何选择所有复选框
[英]How do I select all check box when I click on Select button using jQuery
问题描述
I have HTML page which have multiple check boxes and individually they can be checked. 
我有HTML页面，其中有多个复选框，可以单独检查它们。 I have button select , so what I am suppose to do is. 我有按钮select ，所以我想做的是。 When I click on select all the check boxes should get selected, and deselected. 当我单击全选时，所有复选框应被选中，然后取消选中。
Html 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>
Output 输出量
In the image I have select button. 在图像中，我有选择按钮。 what I want is when I click on select button all the check boxes should get selected 我想要的是当我单击选择按钮时，所有复选框都应该被选中
9 个解决方案
解决方案1
2 2015-04-23 12:49:39
解决方案2
1 已采纳 2015-04-23 12:49:52
#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead. #selectAll是一个按钮，它没有checked属性，但是可以使用data属性来模拟它。
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes 其次， .btn-chk也不是一个复选框，因此无法选中它，您必须定位该复选框
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
解决方案3
1 2015-04-23 12:58:07
解决方案4
1 2015-04-23 13:02:31
Check this jsFiddle 检查这个jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
You can simply use it For more info on jQuery visit w3schools-jquery 您可以简单地使用它。有关jQuery的更多信息，请访问w3schools-jquery
解决方案5
0 2015-04-23 12:56:20
Try this- 尝试这个-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});
解决方案6
0 2015-04-23 12:58:50
Change your jQuery code to 将您的jQuery代码更改为
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
This will toggle between checked and unchecked of the checkboxes when you click the button . 这将切换之间的checked和unchecked的的checkboxes当你点击button 。
解决方案7
0 2015-04-23 13:05:23
inside the "click" function "this" is button and not a checkbox. 在“点击”功能中，“此”是按钮，而不是复选框。 and button property checked is underfined. 和按钮属性检查不足。 "$('.btn-chk').each" - is loop on each element with class ".btn-chk", in your HTML is buttons and not an checkboxes. “ $（'。btn-chk'）。each”-在类为“ .btn-chk”的每个元素上循环，在您的HTML中是按钮而不是复选框。
in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes 在您的上下文中，“＃selectAll”必须是一个复选框，并将类“ .btn-chk”放在您的复选框中
解决方案8
0 2015-04-23 13:14:37
You can do it like this also with ':checkbox' selector. 您也可以使用':checkbox'选择器来做到这一点。
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});
解决方案9
0 2017-01-26 09:36:11
This will definitely works. 这绝对可以。
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.