javascript - 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. 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>pany</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>

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

Share Improve this question edited Dec 23, 2015 at 21:32 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked Apr 23, 2015 at 12:44 Varun 4,45222 gold badges91 silver badges120 bronze badges

I don't understand, you're checking if the select button is checked and using the result to decide whether you select all or not... that won't work. A button can't be checked? – Josh Stevenson Commented Apr 23, 2015 at 12:49
Are you after this kind of functionality: jsfiddle/Puddster/k9ryt981? When you click the top button, all underneath are checked? – Pudd Commented Apr 23, 2015 at 12:51
You are not looping through each checkbox. Change .btn-chk to .hidden to loop through all the checkboxes. – Zee Commented Apr 23, 2015 at 12:52

Add a ment |

9 Answers 9

Sorted by: Reset to default 2

If you want to toggle the checkbox state, you can do like this

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

Fiddle

#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.

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);
    });

});

FIDDLE

An simple way is like below:

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

The Demo.

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

Change your jQuery code to

 $('#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.

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.

in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes

Try this-

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

You can do it like this also with ':checkbox' selector.

$(document).ready(function () {

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

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

This will definitely works.

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745403284a4626198.html

javascript - How do I select all check box when I click on Select button using jQuery - Stack Overflow

9 Answers 9

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How do I select all check box when I click on Select button using jQuery - Stack Overflow

9 Answers 9

相关推荐