Get all checked elements and a value to an array

Question

I have a custom fixed header table element. Basically how it works is I setup a class that will be populated into a list of classes of that type based on data returned from the database. I want to have check boxes for each returned element that if selected will be added to an array. When the user selects "print" I have logic that will print the selected row's record. I also have in the header a select all option for that column. Here is a quick example:

|Name|ID|Product|Date|Select All 'checkbox'|
-----------------------------------------
|JonS|01|prodOne|Date|'checkbox'           |
|AmyA|02|prodTwo|Date|'checkbox'           |

When the user selects the select all checkbox I have the following javascript that will select/deselect each checkbox element.

function showHideAll() {
    if (document.getElementByID('AllCheckBox').checked == 1){
        $('.RowCheckBoxClass').attr('checked',true);
    }
    else {
        $('.RowCheckBoxClass').attr('checked',false);
    }
}

That all works and everything is fine. There is a "print" button at the bottom. Basically I am running this as a print queue. Select the records you want and hit print and it will print the selected records. How can I either find the selected rows? I need the ID of the checked row checkbox. In my class that will be the list of data, I can add an onclick function. The problem is, I don't want to post back everytime a user clicks a checkbox and have to keep a query string. I just want to take the ID of the checked box's row and add this to an array either with javascript or ac# method.

I am thinking of having a jscript method that will scan and see which boxes are checked. But, I am still having trouble with how to add these to a queue. Any help or ideas?

Answer 1

Looks like you're using jQuery already:

  var checkedIdList = [];
  $('.RowCheckBoxClass').each(function(_, cb) {
    if (cb.checked) {
      checkedIdList.push($(cb).closest('tr').find('td')[1].text());
    }
  });

If the "id" values are numeric, then you may want to turn the text into a number:

      checkedIdList.push(parseInt($(cb).closest('tr').find('td')[1].text(), 10));

Answer 2

A better method would be to add a class for all checked items and a rel in checkbox to store the ids. Now when you try to take all the checked ones, call all with the checked class and join all the ids.

---

 
 
 
 
  
  
   function showHideAll() { if (document.getElementByID('AllCheckBox').checked == 1){ $('.RowCheckBoxClass').attr('checked',true); } else { $('.RowCheckBoxClass').attr('checked',false); } }
 
 
  

can be simplified as

 function showHideAll() { $('.RowCheckBoxClass').attr('checked', $('#AllCheckBox').attr('checked')); } 

Answer 3

要扫描页面并找到所有选中的行，可以执行此操作（因为您已经在使用jQuery）：

$(".RowCheckBoxClass:checked");