Monday, 6 April 2015

Hide and show the table using checkbox checked JQuery

In .aspx , we have following html

<div class="mutliSelect">
                                                                                                                          <ul style="width:220px;">
                                                                                                                                <li>
                                                                                                                                    <input type="checkbox" onchange="CheckBox_OnChange('POST AUTOMATICALLY ONLY',this);" value="Apple" name="popup" id="ChkPOSTAUTOMATICALLYONLY"/>POST AUTOMATICALLY ONLY</li>
                                                                                                                                <li>
                                                                                                                                    <input type="checkbox" onchange="CheckBox_OnChange('LINE ITEM DISPLAY',this);" value="Blackberry" name="popup" id="ChkLINEITEMDISPLAY" />LINE ITEM DISPLAY</li>
                                                                                                                                <li>                      
                                                                                                                                    <input type="checkbox" onchange="CheckBox_OnChange('POST W\O TAX ALLOWED',this);" value="HTC" name="popup" id="ChkPOSTW\OTAXALLOWED" />POST W\O TAX ALLOWED</li>
                                                                                                                                <li>                      
                                                                                                                                    <input type="checkbox" onchange="CheckBox_OnChange('OPEN ITEM MGMT',this);" value="Sony Ericson" name="popup" id="ChkPENITEMMGMT" />OPEN ITEM MGMT</li>
                                                                                                                                <li>                      
                                                                                                                                    <input type="checkbox" onchange="CheckBox_OnChange('Others',this);" value="Nokia" name="popup" id="ChkOthers"  />Others</li>   
                                                                                                                            </ul>
                                                                                                                      </div>


in aspx page we have a table of id tblPostAutoOnly, tblLineItemDesp, tblPostTaxAllowed, tblOpenItemMgmt, tblOthers.
on event of  onchange we are calling function CheckBox_OnChange with two parameter one is string value and another is checkbox colntrol using "this".
in JQuery place following code.
function CheckBox_OnChange(CheckedUncheckedField,control) {
                //alert(CheckedUncheckedField);   
    var IsChecked=control.checked;
   
    switch(CheckedUncheckedField) {
                    case 'POST AUTOMATICALLY ONLY':
                                if(IsChecked){
                                                $('#tblPostAutoOnly').css('display','');
                                }else{
                                                $('#tblPostAutoOnly').css('display','none');                         
                                }
                        break;
                    case 'LINE ITEM DISPLAY':
                                if(IsChecked){
                                                $('#tblLineItemDesp').css('display','');
                                }else{
                                                $('#tblLineItemDesp').css('display','none');                         
                                }
                       
                        break;
                    case 'POST W\O TAX ALLOWED':
                        if(IsChecked){
                                                $('#tblPostTaxAllowed').css('display','');
                                }else{
                                                $('#tblPostTaxAllowed').css('display','none');                     
                                }
                               
                        break;
                    case 'OPEN ITEM MGMT':
                        if(IsChecked){
                                                $('#tblOpenItemMgmt').css('display','');
                                }else{
                                                $('#tblOpenItemMgmt').css('display','none');                    
                                }
                               
                        break;
                    case 'Others':
                        if(IsChecked){
                                                $('#tblOthers').css('display','');
                                }else{
                                                $('#tblOthers').css('display','none');                       
                                }
                               
                        break;
                                    
                }
}