CODEWITHSUNDEEP
javascriptjqueryhtml
Varun
Varun

Reputation: 4452

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

enter image description here

In the image I have select button. what I want is when I click on select button all the check boxes should get selected

Upvotes: 1

Views: 4037

Answers (9)

JatinBhattPhp
JatinBhattPhp

Reputation: 43

This will definitely works.

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

Upvotes: 0

Vitaliy Terziev
Vitaliy Terziev

Reputation: 6671

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

$(document).ready(function () {

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

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

Upvotes: 0

Mani Deep
Mani Deep

Reputation: 1356

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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

#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

Upvotes: 1

mohit
mohit

Reputation: 1968

Try this- 

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

Upvotes: 0

freethinker
freethinker

Reputation: 2425

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

Upvotes: 0

Zee
Zee

Reputation: 8488

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.

Upvotes: 0

xdazz
xdazz

Reputation: 160833

An simple way is like below:

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

The Demo.

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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

Upvotes: 2

Related Questions