Solved

Checkbox will not stayed check

Posted on 2013-12-05
6
319 Views
Last Modified: 2013-12-18
Hello,

I am populating values into a data table by using a check box group. You check the box and a value shows up in the table.  However, I cannot get multiple check boxes  to hold their value of 'checked'  and not get multiple values to display in the table.  Below is my code for the check box.  Thanks for the help
capturetheflag
<script type="text/javascript">
// - jQuery SHOW/HIDE functions
$(document).ready(function(){
		$('#showJobtitles :checkbox').live('click',function() {
		var checkboxVal = $('#showJobtitles :checkbox:checked').val();
		$('.jobTitleCol_'+checkboxVal).toggle();
		$('.jobTitleTD_'+checkboxVal).toggle();
		//$( "p" ).toggle( "slow" );
		//alert(checkboxVal);
		//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
		//$('#showJobtitles :checkbox:checked',true).val();
		//$('.jobTitleTD').toggle();
		return false;
	});
});
</script>

Open in new window

0
Comment
Question by:capturetheflag
  • 2
  • 2
  • 2
6 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
please provide a link to your page or post the RENDERED html (right click on the page in your browser and choose view source)
0
 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
You are monitoring the click event of every checkbox and toggling every checkbox every time one of them is clicked.  This is the reason you can't get the checkboxes to hold the checks.  If you want values to populate relative to the checkboxes checked, just do an update of the table each time a checkbox is checked, and don't toggle the checkboxes:

<script type="text/javascript">
// - jQuery SHOW/HIDE functions
$(document).ready(function(){
		$('#showJobtitles :checkbox').live('click',function() {
                                        var checkboxVal;
                                        $('#showJobtitles :checkbox:checked').each(function(index) {
		              checkboxVal = $(this).val();
                                              alert(checkboxVal);
                                              // put your table update code here.
                                       });
                                       return false;
	});
});
</script> 

Open in new window

0
 
LVL 1

Author Comment

by:capturetheflag
Comment Utility
Hello leakim,

Here is the HTML code.

<!--TOA MODULE_ADMIN CONTRACTS AND CONTRACTORS PANEL-->
<!--////////////////// HEADER //////////////////-->
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
	<head>
        <meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
        <meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Task Order Administration</title>
        <link href="../Library/v1.0/css/dataTables.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="../Library/v1.0/css/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="../Library/v1.0/css/navy_silver/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="../Library/v1.0/css/FEMA_TST_Standard_Styles.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="css/application.css" rel="stylesheet" type="text/css" media="screen" />
        <link href="css/styles-print.css" rel="stylesheet" type="text/css" media="print" />
        
        <!--[if IE]>
            <link href="css/styles-ie.css" rel="stylesheet" type="text/css" media="screen" />
        <![endif]-->
 
        <script src="../Library/v1.0/js/jquery.js" language="javascript"></script>
        <script src="../Library/v1.0/js/jquery-ui.js" language="javascript"></script>
        <script src="../Library/v1.0/js/jquery-timepicker.js" language="javascript"></script>
        <script src="../Library/v1.0/js/dataTables-min.js" language="javascript"></script>
        <script src="../Library/v1.0/js/colorbox-min.js" language="javascript"></script>
        <script src="../Library/v1.0/js/autogrowtextarea.js" language="javascript"></script>
        <script src="../Library/v1.0/js/filterCombo.js" language="javascript"></script>
        <script src="../Library/v1.0/js/global_functions.js" language="javascript"></script>
				<script src="includes/js/functions.js" language="javascript"></script>
        
        
          <script src="../Library/v1.0/js/application_timeout.js" language="javascript"></script>
        
        
    </head>
	<body>
    <div id="skip">
        <a href="#skipnav">Skip Navigation Links - Go to Main Content</a>
    </div>
 
    	<center>
        <div id="container" align="center">
 
        	<div id="roundedBG-T"><div id="roundedBG-TL"></div><div id="roundedBG-TR"></div></div>
        	<div class="clr"></div>
        	<div id="contentBG">
        		<div id="sitewrapper">
       				 <div id="header">
                <div id="FEMA_seal"><img src="images/clear.gif" height="100%" width="100%" alt="FEMA Seal" title="FEMA Seal" /></div>
                 <div id="banner">
                    <div id="application_name"><img src="images/appname.png" border="0" title="Task Order Administration" alt="Task Order Administration" /></div>
                    
                    <div id="user_name">Hello  </div>
                    
                    <div id="ECIM_Logo"><img src="images/clear.gif" height="100%" width="100%" alt="The Enterprise Coordination and Information Management (ECIM) Section of the VA-NPSC serves as the center for Individual Assistance (IA) information management and custom application development.  ECIM develops and maintains information management tools and custom applications that support the National Emergency Management Information System (NEMIS) and NPSC applicant processing through automated data processing solutions." title="The Enterprise Coordination and Information Management (ECIM) Section of the VA-NPSC serves as the center for Individual Assistance (IA) information management and custom application development.  ECIM develops and maintains information management tools and custom applications that support the National Emergency Management Information System (NEMIS) and NPSC applicant processing through automated data processing solutions." /></div>
                 </div>
                </div>
              <div class="clr"></div>
              
              
                  <!--////////////////// TOP NAVIGATION ///////////////////-->
                      
 
<div id="topNavigation">
    <ul>
    	<li class="actions_icon"><a class="showSubNav" href="actionSubNav">Admin</a>
             <ul class="subNav" id="actionSubNav">
                    <li class="admin_icon"><a href="personnel_job_titles.asp">Personnel Job Titles</a></li>
                    <li class="admin_icon"><a href="job_titles.asp">Job Title Assignments</a></li>
                    <li class="admin_icon"><a href="categories.asp">Categories</a></li>
                    <li class="admin_icon"><a href="contractors.asp">Contractors</a></li>
                    <li class="admin_icon"><a href="contracts_contractors.asp">Contracts & Contractors</a></li>
                    <li class="admin_icon"><a href="contracts.asp">Contracts</a></li>
                    <li class="admin_icon"><a href="service_types.asp">Service Types</a></li>
                    <li class="admin_icon"><a href="contract_types.asp">Contract Types</a></li>
             </ul>
      	</li>
 
      	
        <li class="qasp_icon" title="Go to this area to manage disaster contract quality survellience">
        	<a href="qasp.asp" >QASP</a>
        </li>
        
      	<li class="reports_icon" title="Go to this area to view reports">
        	<a href="#">Reports</a>
        </li>
        
    	<li class="tof_icon" title="Go to this area to manage task order funding">
        	<a href="tof.asp" >TOF</a>
        </li>
        
      	<li class="password_icon" title="Go to this area to change your applications password">
        	<a href="https://vsr.dev.fema.net/VACS/pwchange/" target="_blank">Change Password</a>
        </li>
        
      	<li class="email_icon" title="Send an e-mail to ???">
        	<a href="mailto:VA-NPSC-Technical-Solutions-Team@fema.dhs.gov&subject=TOA Help">Contact Us</a>
        </li>
        
      	<li class="logout_icon" title="Log out of this application">
        	<a href="actions.asp?action=logout">Logout</a>
        </li>
    </ul>
</div>
 
                  <!--///////////////// END TOP NAVIGATION /////////////////-->
                      
                    <div id="wrapper">
           
                    <script type="text/javascript"> 
if (typeof jQuery == 'undefined'){
	document.write('<div id="JSError"><img src="images/icons/alert.png" class="icon" title="Javascript required to use this application has failed to load." alt="Javascript required to use this application has failed to load." /> JavaScript required for this application to properly function has failed to load. Please refresh the page to see if this error resolves itself. If this error continues please send an email requesting help.</div><style type="text/css">#content{display: none; }</style>');
}
</script>
<noscript>
	<div id="JSError">
    	<img src="images/icons/alert.png" class="icon" title="Javascript must be enabled to use this application." alt="Javascript must be enabled to use this application." /> JavaScript must be enabled to use this application. Please enable JavaScript and refresh the page to continue.
    </div>
    <style type="text/css">
		#content{display: none; }
    </style>
</noscript>
                    
                        <div id="content">
                            <a name="top"></a>
                            <a name="skipnav"></a>
                            
<!--//////////////// END HEADER ////////////////-->
 
<!--/////////////// MAIN CONTENT ///////////////-->
<h1 class="pageHeader">Personnel Job Titles</h1>
 
<script type="text/javascript"> 
// - jQuery SHOW/HIDE functions
//$(document).ready(function(){
//		$('#showJobtitles :checkbox').live('click',function() {
//		var checkboxVal = $('#showJobtitles :checkbox:checked').val();
//		$('.jobTitleCol_'+checkboxVal).toggle();
//		$('.jobTitleTD_'+checkboxVal).toggle();
		//$( "p" ).toggle( "slow" );
		//alert(checkboxVal);
		//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
		//$('#showJobtitles :checkbox:checked',true).val();
		//$('.jobTitleTD').toggle();
//		return false;
//	});
//});
</script>
 
<script type="text/javascript"> 
// - jQuery SHOW/HIDE functions
$(document).ready(function(){
		$('#showJobtitles :checkbox').live('click',function() {
                                        var checkboxVal;
                                        $('#showJobtitles :checkbox:checked').each(function(index) {
		              checkboxVal = $(this).val();
                                              //alert(checkboxVal);
	$('.jobTitleCol_'+checkboxVal).toggle();
	$('.jobTitleTD_'+checkboxVal).toggle();
                                              // put your table update code here.
                                       });
                                       //return false;
	});
});
</script> 
                                            
 
 
 
 
<div id="content">              
 
 
 
<form method="link" action="insert_personnel_job_titles.asp" title="Add Personnel Job Titles">		
<input type="submit" class="button iconRight add_personnel_job_titles" id="add_personnel_job_titles" value="Add Personnel Job Titles" style="background-image: url(images/icons/add.png);" alt="Add Personnel Job Titles" title="Add Personnel Job Titles"/>
</form>
<div id="showJobtitles"><span><b>Show Job Titles:&nbsp;</b></span><input type="checkbox" value="15"/>&nbsp;AAAAAAAAAAAAA&nbsp;<input type="checkbox" value="2"/>&nbsp;COTR&nbsp;<input type="checkbox" value="1"/>&nbsp;Contracting Officer&nbsp;<input type="checkbox" value="3"/>&nbsp;Inspection Services Coordinator&nbsp;<input type="checkbox" value="11"/>&nbsp;JOB TITLE 1 TEST&nbsp;<input type="checkbox" value="10"/>&nbsp;JOB TITLE 2 TEST&nbsp;<input type="checkbox" value="4"/>&nbsp;Project Head&nbsp;<input type="checkbox" value="5"/>&nbsp;Project Officer&nbsp;<input type="checkbox" value="8"/>&nbsp;TEST222&nbsp;<input type="checkbox" value="9"/>&nbsp;TESTERaaa&nbsp;<input type="checkbox" value="6"/>&nbsp;Task Monitor&nbsp;<input type="checkbox" value="13"/>&nbsp;a&nbsp;<input type="checkbox" value="7"/>&nbsp;abc&nbsp;<input type="checkbox" value="12"/>&nbsp;x&nbsp;<input type="checkbox" value="14"/>&nbsp;xxxxxxxxxxxxxx&nbsp;<div><a href="#">Save as default view</a></div></div><div style="clear:both;"></div>
 
 
<div id="personnel_list_area" style="margin-top: 2em; background-color: #CCC">
<table id="personnel_list" cellpadding="0" cellspacing="0" border="0">
<thead>
	<tr>
    <th scope="col"></th>
	<th scope="col">Name</th>
    <th scope="col">Active?</th>
    <th scope="col">Nemis ID</th>
 
 
 
              		 <th scope="col" style="display: none" class="jobTitleCol_15">AAAAAAAAAAAAA</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_2">COTR</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_1">Contracting Officer</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_3">Inspection Services Coordinator</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_11">JOB TITLE 1 TEST</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_10">JOB TITLE 2 TEST</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_4">Project Head</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_5">Project Officer</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_8">TEST222</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_9">TESTERaaa</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_6">Task Monitor</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_13">a</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_7">abc</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_12">x</th>
              
 
              		 <th scope="col" style="display: none" class="jobTitleCol_14">xxxxxxxxxxxxxx</th>
              
 
 
    </tr>    
</thead>
<tbody>
     
       
	<tr>
		<td><a href="update_personnel_job_titles.asp?personnel_id=3&user_id=YBEAR"><img src="images/icons/edit.png" border="0"/></a></td>
 
    <td>Yogi &nbsp;  &nbsp; Bear </td>
    <td>
		
		<img src="images/icons/check.png" border="0"/>
		
    </td>
    <td>YBEAR--3</td> 
 
 
 
                      
                       <td style="display:none;" class="jobTitleTD_15"> 
                       
								
                                      
                                        <img src="images/icons/check.png" border="0"/>
 
                                      
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_2"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_1"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_3"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_11"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_10"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_4"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_5"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_8"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_9"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_6"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_13"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_7"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_12"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_14"> 
                       
								
                        </td>
                
                     
       
	<tr>
		<td><a href="update_personnel_job_titles.asp?personnel_id=2&user_id=DDUCK"><img src="images/icons/edit.png" border="0"/></a></td>
 
    <td>Donald &nbsp;  &nbsp; Duck </td>
    <td>
		
		<img src="images/icons/check.png" border="0"/>
		
    </td>
    <td>DDUCK--2</td> 
 
 
 
                      
                       <td style="display:none;" class="jobTitleTD_15"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_2"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_1"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_3"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_11"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_10"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_4"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_5"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_8"> 
                       
								
                                      
                                        <img src="images/icons/check.png" border="0"/>
 
                                      
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_9"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_6"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_13"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_7"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_12"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_14"> 
                       
								
                        </td>
                
                     
       
	<tr>
		<td><a href="update_personnel_job_titles.asp?personnel_id=1&user_id=MMOUSE"><img src="images/icons/edit.png" border="0"/></a></td>
 
    <td>Mickey &nbsp;  &nbsp; Mouse </td>
    <td>
		
		<img src="images/icons/check.png" border="0"/>
		
    </td>
    <td>MMOUSE--1</td> 
 
 
 
                      
                       <td style="display:none;" class="jobTitleTD_15"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_2"> 
                       
								
                                      
                                        <img src="images/icons/check.png" border="0"/>
 
                                      
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_1"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_3"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_11"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_10"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_4"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_5"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_8"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_9"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_6"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_13"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_7"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_12"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_14"> 
                       
								
                        </td>
                
                     
       
	<tr>
		<td><a href="update_personnel_job_titles.asp?personnel_id=4&user_id=CRELLA"><img src="images/icons/edit.png" border="0"/></a></td>
 
    <td>Cindy &nbsp;  &nbsp; Rella </td>
    <td>
		
		<img src="images/icons/check.png" border="0"/>
		
    </td>
    <td>CRELLA--4</td> 
 
 
 
                      
                       <td style="display:none;" class="jobTitleTD_15"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_2"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_1"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_3"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_11"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_10"> 
                       
								
                                      
                                        <img src="images/icons/check.png" border="0"/>
 
                                      
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_4"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_5"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_8"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_9"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_6"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_13"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_7"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_12"> 
                       
								
                        </td>
                
                 
                      
                       <td style="display:none;" class="jobTitleTD_14"> 
                       
								
                        </td>
                
                 
</tbody>
</table>
 
		
        
</div>
 
 
 
<script type="text/javascript"> 
$("document").ready(function () {
	$("#personnel_list").dataTable({
		bJQueryUI: true
	});	
});
</script>
 
</div> <!--end content-->
<!--///////////// END MAIN CONTENT /////////////-->
 
<!--////////////////// FOOTER //////////////////-->
		</div>
		</div>
 
            </div>
                <div class="clr"></div>
                    <div id="footer">
                    	<ul class="errorDetail">
                      	<li>
                        	<img src="images/icons/page_load_error.png" class="icon" alt="Page loaded in 0.031 seconds with the following error(s): Permission denied" title="Page loaded in 0.031 seconds with the following error(s): Permission denied" /> 
                        </li>
                      </ul>
                    	<ul class="version">
                      	<li>
                        	Task Order Administration Version 4.0 - Development
                        </li>
                      </ul>
                      <ul class="contact">
	                      <li><a href="http://on.fema.net/programs/orr_programs/recovery_programs/npscs/information_mgmt/TST_App_User_Guides/TOA_Release_Notes.txt" target="_blank"><img src="images/icons/release_notes.png" class="icon" alt="View the Task Order Administration release notes" title="View the Task Order Administration release notes" /> Release Notes</a></li>
                      	<li><a href="http://on.fema.net/programs/orr_programs/recovery_programs/npscs/information_mgmt/TST_App_User_Guides/Forms/TOA.aspx" target="_blank"><img src="images/icons/user_manual.png" class="icon" alt="View the Task Order Administration user documentation" title="View the Task Order Administration user documentation" /> User Guides</a></li>
                        <li><a href="mailto:VA-NPSC-Technical-Solutions-Team@fema.dhs.gov&subject=TOA Help"><img src="images/icons/help.png" class="icon" alt="Send an email to request help" title="Send an email to request help"/> Help</a></li>
                      </ul>
                    </div>
                <div class="clr"></div>
                </div>
            <div id="roundedBG-B"><div id="roundedBG-BL"></div><div id="roundedBG-BR"></div></div>
		</div>
                
    </center>
 
	</body>
</html>
<!--//////////////// END FOOTER ////////////////-->
 
 
 

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 17

Expert Comment

by:OmniUnlimited
Comment Utility
Hmm.  Maybe I didn't explain myself very well.

Ok, let's try this:  you stated:

You check the box and a value shows up in the table.

Can you show me which code is placing the value in the table?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Please note $.live deprecated since jQuery 1.9 (it's not really a problem for you currently)
You can use $.on instead.
With checkbox use change instead click event because user can change checkbox state with their keyboard for example.

Test page : http://jsfiddle.net/23SnA/

// - jQuery SHOW/HIDE functions
$(document).ready(function(){
    $('#showJobtitles').on("change", ":checkbox", function() {
        $('#showJobtitles :checkbox').each(function(index) {
            var checkboxVal = $(this).val();
            var isChecked = $(this).is(":checked");
            var showORhide = isChecked?"block":"none";
            $('.jobTitleCol_'+checkboxVal).css("display", showORhide);
            $('.jobTitleTD_'+checkboxVal).css("display", showORhide);
        });
    });
});

Open in new window

0
 
LVL 1

Author Closing Comment

by:capturetheflag
Comment Utility
Hello leakim971,

Thanks for your help.  It worked.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Select2 jquery help 9 40
jQuery animation faster 1 16
Hidden Field Value 10 33
Uncaught TypeError: can't read property 1 4
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now