asked on

Select all checkbox doesn't work, need help!!!

Hi all, I am still a jquery beginner.
I used the following code to make all checkbox 'selected'. I could see it happened.
But when I ran the program, I'd got the following problems:

(1) it showed '0' was actually selected.
I need to see the 'checked' checkbox are really selected.
(2) In the current situation, if I 'unchecked' one of checkboxes (suppose the selectall checkbox is now checked), the 'selectall' checkbox is still 'checked'. It should suppose to be 'unchecked'. And definitely still counted '0' was selected.

Would you please help to correct the following code to what I expected result?

$('#selectAll').change(function(){
var table = $("#myTable").DataTable();
var cells = table.cells( ).nodes();
$( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));
});

check the selected table length:
alert('table length:'+table.rows('.selected').data().length);

Many thanks,
Sam.

Scott Fell

Can you post a quick example html file. (Not a large full html file, just what is important to see what you are doing)

Sam Hung

ASKER

Hi expert, I finally attached only a screenshot selectall jpeg file.

(1) I click "selectAll" at the top left corner, all checkboxes over 45 pages are all selected. (It works)
The code:

$('#selectAll').change(function(){
   var table =  $("#myTable").DataTable();
   var cells = table.cells( ).nodes();
   $( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));	   
});

Open in new window

(2) I click the button "Return". I would like to put all selected records into another grid window.
The code:

$('#getSubmit').click(function() {
		var table =  $("#myTable").DataTable();
		var taStr1='';
		var taStr2='';
		var cpSrhObjectData = [];
		alert('3.2.1 length:'+table.rows('.selected').data().length);
		for (i=0;i<table.rows('.selected').data().length;i++){
			taStr1=table.rows('.selected').data()[]i][15];
			taStr2=table.rows('.selected').data()[]i][16];
			//alert('3.2.1 length:'+taStr);
			var cpSrhObject={};
			cpSrhObject.ccdidComp = taStr1 + '';
			cpSrhObject.ccdidIndv = taStr2 + '';
			cpSrhObjectData.push(cpSrhObject);								
		}
        try {
            window.parent.postMessage(cpSrhObjectData, '*');           
		}
        catch (err) {alert(err.message);}
    	});				
	});

Open in new window

The alert shows 3.2.1 length: 0 (It doesn't work).

But, If I click the 3 checkboxes to make them selected, I click the "return" button and it shows the result 3.2.1 length: 3, and it put all selected records into another grid window. (It works)
The code:

// Click row checkbox
$('#myTable tbody').on( 'click', 'input#inputcheckbox', function () {
   console.log("");
   var table =  $("#myTable").DataTable();
    $(this).parents('tr').toggleClass('selected');     
  });

Open in new window

So, it means:
(a) click the checkboxes to make them selected - it works
(b) selectAll checkbox: I can see all checkboxes selected - it works
(c) selectAll checkbox: after select all checkboxes, click the "return" button, the alert message shows length: 0, and no records were added into another grid window.

I wish I have made myself clear.

Thanks,
Sam.

Table:

<div class="panel-body collapse in" id="scroll_div">
        	<table class="table table-striped table1" id="myTable">
            	<thead> 
            	<tr>
            		<td style="display:none" ></td>
                	<th><input type="checkbox" id="selectAll" /></th>            
                	<th>Company Name</th>
                	<th>Country</th>
...

Open in new window

selectall.jpg

Scott Fell

This is what I am after

http://jsbin.com/bocahiyudu/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    
  </style>
</head>
<body>
<div class="panel-body collapse in" id="scroll_div">
        	<table class="table table-striped table1" id="myTable">
            	<thead> 
            	<tr>
            		<th style="display:none" ></th>
                	<th><input type="checkbox" id="selectAll" /></th>            
                	<th>Company Name</th>
                	<th>Country</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="display:none">col 1</td>
                  <td>col 2</td>
                  <td>col 3</td>
                  <td>col 4</td>
                </tr>  
              </tbody>
          </table>  
  </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$('#selectAll').change(function(){
   var table =  $("#myTable").DataTable();
   var cells = table.cells( ).nodes();
   $( cells ).find(':checkbox').prop('checked', $(this).is(':checked'));	   
});
  
  $('#getSubmit').click(function() {
		var table =  $("#myTable").DataTable();
		var taStr1='';
		var taStr2='';
		var cpSrhObjectData = [];
		alert('3.2.1 length:'+table.rows('.selected').data().length);
		for (i=0;i<table.rows('.selected').data().length;i++){
			taStr1=table.rows('.selected').data()[]i][15];
			taStr2=table.rows('.selected').data()[]i][16];
			//alert('3.2.1 length:'+taStr);
			var cpSrhObject={};
			cpSrhObject.ccdidComp = taStr1 + '';
			cpSrhObject.ccdidIndv = taStr2 + '';
			cpSrhObjectData.push(cpSrhObject);								
		}
        try {
            window.parent.postMessage(cpSrhObjectData, '*');           
		}
        catch (err) {alert(err.message);}
    	});				
	});
  
  
  // Click row checkbox
$('#myTable tbody').on( 'click', 'input#inputcheckbox', function () {
   console.log("");
   var table =  $("#myTable").DataTable();
    $(this).parents('tr').toggleClass('selected');     
  });
  
  
  
 </script>
  
</body>
</html>

Open in new window

Your first header row in your code has a TD and not a TH. In the code above, I updated. Now, can you complete the example so we can test your code. Make sure the mark up is valid and every element you are targeting in your js code is in the html (I don't see a select all as one example)

HainKurt

not sure, but your [] does not make sense

taStr1=table.rows('.selected').data()[]i][15];
taStr2=table.rows('.selected').data()[]i][16];

Open in new window

>>>

taStr1=table.rows('.selected').data()[i][15];
taStr2=table.rows('.selected').data()[i][16];

Open in new window

HainKurt

also, delete line 59 or 60, it is extra...

also, you need datatables css and js

here is a working demo

https://jsfiddle.net/2h1row73/

and your code should be on jQuery DOM Ready wrapper function :)

HainKurt

I put some ideas here in a demo...

check it out...

https://jsfiddle.net/vbr5uh4u/

select all is not working as expected, but the rest looks ok...

Scott Fell

Before spending any more guesses, let's get the entire example posted because there can be multiple issues that can not be detected with the small portion here. Even better will be a link to the site with private data excluded.

Sam Hung

ASKER

Dear HainKurt/Scott,

I just checked the demo Hankurt simulated.
He has completely simulated what the problem I am now suffering.
Yes, select all is not working as expected, but the rest looks fine.

So how to correct the select all problem?

Many thanks,
Sam.

HainKurt

check this

https://jsfiddle.net/j67yqrp4/

$('#selectAll').change(function() {
  var cells = table.cells().nodes();
  $(cells).find(':checkbox').prop('checked', $(this).is(':checked'));
  $(cells).find(':checkbox').change();
});

$('#myTable tbody input:checkbox').change(function() {
  if ($(this).is(":checked")) $(this).parents('tr').addClass('selected');
  else $(this).parents('tr').removeClass('selected');
  //$(this).parents('tr').toggleClass('selected');
});

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sam Hung

ASKER

Dear expert Hainkurt,

I tried your code and it works now.
Now both selectall and rest multiple select checkbox work fine.
Thanks a lot for your great help.

Many thanks,
Sam.

Sam Hung

ASKER

Thanks for your great help Hainkurt.