Question

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

HTML

＆＃13;

<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>

＆＃13;

输出

enter image description here

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

Answer 1

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

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

Fiddle

Answer 2

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

其次，.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

Answer 3

一种简单的方法如下：

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

<强> The Demo.

Answer 4

选中此jsFiddle

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

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

Answer 5

试试这个 -

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

Answer 6

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

    }
});

当您点击checked时，这会在unchecked的{{1}}和checkboxes之间切换。

Answer 7

在“点击”功能里面“这个”是按钮而不是复选框。和按钮属性选中是未定义的。 “$（'。btn-chk'）。每个” - 在每个元素上循环，类“.btn-chk”，在你的HTML中是按钮而不是复选框。

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

Answer 8

你可以使用':checkbox'选择器这样做。

$(document).ready(function () {

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

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

Answer 9

这肯定会奏效。

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

当我使用jQuery单击“选择”按钮时，如何选中所有复选框

9 个答案: