- In the below page the Checkbox checked values should be maintained as comma separated values.
- If select all checkbox at the top is clicked all the checkbox in that column should be marked as clicked.
- In the same way if all individual checkbox are selected the select All checkbox should be Marked as Clicked.
function changeInvestmentIds(pThis) { if($(pThis).is(":checked")) { //Hidden variable which stores the CSV values of Checkbox if($('#csvSelectedInvestmentIds').val() != '') arrInvstIds = $('#csvSelectedInvestmentIds').val().split(','); arrInvstIds.push($(pThis).val()); $('#csvSelectedInvestmentIds').val(arrInvstIds.join(",")); } else //Incase the checkbox is unchecked the values shld be removed from hidden variable { arrInvstIds = $('#csvSelectedInvestmentIds').val().split(','); for(var i = arrInvstIds.length; i--;) { if(arrInvstIds[i] === $(pThis).val()) { arrInvstIds.splice(i, 1); } } $('#csvSelectedInvestmentIds').val(arrInvstIds.join(",")); } //This is called here incase all checkbox are checked the //select all should also be checked chkIsAllChecked(); setParentWindowVal(); } //Incase selectAll checkbox is ticked all the checkbox should be marked as checked. function toggleSelectAll(source) { csvInvestmentIds = ''; var arrInvIds = []; if($(source).prop('checked')) $('.chkInvestmentClass').prop('checked', true); else $('.chkInvestmentClass').prop('checked', false); if($(source).prop('checked')) { //The values of all the checkbox are added to array and //moved to csv hidden variable $(".chkInvestmentClass").each(function() { arrInvIds.push($(this).val()); }); $('#csvSelectedInvestmentIds').val(arrInvIds.join(",")); }else $('#csvSelectedInvestmentIds').val(''); setParentWindowVal(); } //This function is to check if all check boxes when checked //individually the select all check box should be checked function chkIsAllChecked() { if($('.chkInvestmentClass:checked').length == $('.chkInvestmentClass').length) $('#chkSelectAll')[0].checked=true; else $('#chkSelectAll')[0].checked=false; }
HTML Code
- changeInvestmentIds(pThis) function is called in each checkbox when click event is carried out.
- toggleSelectAll(source) is called when selectAll checkbox is Clicked
- chkIsAllChecked() is called internally in changeInvestmentIds(pThis)
<table> <thead> <tr> <th> Locations </th> <th> <input type="checkbox" name="chkSelectAll" value="SelectAll" styleId="selectAllChkBx" onclick="toggleSelectAll(this);"/> </th> <tr> </thead> <tbody> <tr> <td>Chennai</td> <td> <input type="checkbox" name="chkInvestmentIds" value='Chennai' />' class="chkInvestmentClass" onclick="changeInvestmentIds(this)"> </td> </tr> <tr> <td>Bangalore</td> <td> <input type="checkbox" name="chkInvestmentIds" value='Bangalore' />' class="chkInvestmentClass" onclick="changeInvestmentIds(this)"> </td> </tr> <tr> <td>Mumbai</td> <td> <input type="checkbox" name="chkInvestmentIds" value='Mumbai' />' class="chkInvestmentClass" onclick="changeInvestmentIds(this)"> </td> </tr> </tbody> </table>