当我单击使用 jQuery 的选择按钮时如何选择所有复选框答案

【问题标题】：How do I select all check box when I click on Select button using jQuery当我单击使用 jQuery 的选择按钮时如何选择所有复选框
【发布时间】：2015-04-23 12:44:06
【问题描述】：

我的 HTML 页面有多个复选框，可以单独选中它们。我有按钮select，所以我应该做的是。当我单击选择时，所有复选框都应该被选中，然后被取消选中。

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>

输出

在图像中我有选择按钮。我想要的是当我点击选择按钮时所有的复选框都应该被选中

【问题讨论】：

我不明白，你正在检查选择按钮是否被选中，并使用结果来决定你是否全选......那是行不通的。无法检查按钮？
你追求这种功能吗：jsfiddle.net/Puddster/k9ryt981？当你点击顶部按钮时，下面的都被选中了吗？
您没有遍历每个复选框。将 .btn-chk 更改为 .hidden 以遍历所有复选框。

标签： javascript jquery html

【解决方案1】：

如果你想切换复选框状态，你可以这样做

var chkd = true;
$('#selectAll').click(function(event) {
    $(":checkbox").prop("checked", chkd);
    chkd = !chkd;
});

Fiddle

【讨论】：

【解决方案2】：

#selectAll 是一个按钮，它没有 checked 属性，但可以使用 data 属性来模拟它。

其次，.btn-chk 也不是复选框，所以不能被选中，你必须定位复选框

$(document).ready(function() {
    $('#selectAll').click(function(event) {
        var checked = !$(this).data('checked');

        $('.btn-chk').next().prop('checked', checked);

        $(this).data('checked', checked);
    });

});

FIDDLE

【讨论】：

【解决方案3】：

一个简单的方法如下：

$(function() {
    $('#selectAll').click(function() {
        $(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
    });
});

The Demo.

【讨论】：

勾选第一个复选框，然后点击选择按钮。然后对第二个复选框重复相同的步骤，看看区别

【解决方案4】：

查看jsFiddle

$(document).ready(function() {
   $('#selectAll').click(function() {
        $(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
    });
});

你可以简单地使用它有关 jQuery 的更多信息，请访问w3schools-jquery

【讨论】：

【解决方案5】：

将您的 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"                       
        });         

    }
});

当您单击button 时，这将在checkboxes 的checked 和unchecked 之间切换。

【讨论】：

【解决方案6】：

在“点击”功能中，“this”是按钮而不是复选框。并且检查的按钮属性不足。 “$('.btn-chk').each” - 在每个带有“.btn-chk”类的元素上循环，在您的 HTML 中是按钮而不是复选框。

在您的上下文中，“#selectAll”必须是一个复选框，并将类 '.btn-chk' 放在您的复选框上

【讨论】：

【解决方案7】：

试试这个-

var checked = true;
$('#selectAll').click(function(event) {
    $('table tr').each(function( index ) {
        $(this).find('input[type="checkbox"]').prop(checked, true);
    });
    checked = !checked;
});

【讨论】：

我认为 OP 希望在再次单击按钮时也取消选中复选框。

【解决方案8】：

您也可以使用 ':checkbox' 选择器来执行此操作。

$(document).ready(function () {

    $('#selectAll').on('click', function () {
        $(':checkbox').each(function () {

            $(this).click();
        });
    });
});

【讨论】：

【解决方案9】：

这肯定行得通。

$("#selectAll").click(function(){
    var checked = !$(this).data('checked');
    $('.btn-chk').prop('checked', checked);         
    $(this).data('checked', checked);
});

【讨论】：