JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/35522952/jquery-checkbox-action-when-checked

by joeycakes

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
		<table>
    
			<tr>
				<td>
					Contact Type:
				</td>
				<td>
					<select name="contactSelect" id="contactSelect"> <!-- Function showHide Show work on table elements -->
						<option name="default" value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
						<option name="Send Inquiry" value="Inquiry" id="cat2" text="General Inquiry">General Inquiry</option> <!-- Shows Option 1 Row -->
						<option name="Send Feedback" value="Feedback" id="cat3" text="Send Feedback">Send Feedback</option> <!-- Shows Option 2 Row -->
						<option name="File Complain" value="Complain" text="File Complain">File Complain</option> <!-- Shows Option 3 Row -->
						<option name="New Request" value="Request" text="New Request">New Request</option> <!-- Shows Option 4 Row -->
					</select>
				</td>
			</tr>
      
			<tr> <!-- Header from contactSelect-->
				<th colspan="2" id="myHeader" name="myHeader" value="text" style="display:none">text</th>
			</tr>
      
			<tr class='row General Inquiry' style="display:none">
				<td>Inquiry</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
      
			<!-- Feedback
			All General Inguqires goes here
			-->
      
			<tr class='row Feedback' style="display:none">
				<td>Feedback</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
      
			<!-- Complains
			All General Inguqires goes here
			-->
      
			<tr class='row Complain' style="display:none">
				<td>Complain</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
      
			<!-- New Implementation Requests
			All General Inguqires goes here
			-->
      
			<tr class='row New Request' style="display:none">
				<td>Storage</td>
				<td><input type="checkbox" name="storage" value="storage"></td>
			</tr>
      
			<tr class='row New Request' style="display:none">
				<td>Network Infrastructure</td>
				<td><input type="checkbox" id="network" name="network"...

JavaScript

function changeVal() {
				$('#myHeader').html(this.name);
				$(this).closest('tr').nextAll('.row').hide();
				$(this).closest('tr').nextAll('.subrow').hide();
				$('.'+this.value).show();
        console.log($('.'+this.value));
				var tempText = "";
				switch(this.value)
				{
					case "Inquiry":
						tempText="Send Inquiry";
						break;
					case "Feedback":
						tempText="Send Feedback";
						break;
					case "Complain":
						tempText="File Complain";
						break;
					case "Request":
						tempText="New Request";
						break;
				}
				$('#myHeader').html(tempText).toggle(this.value != 'default');
			}

			$(function(){
				$('#contactSelect').change(changeVal);
			});
      
			function changeValSub() {
				$(this).closest('tr').nextAll('.subrow').hide();
        if ($(this).is(':checked')) {
				  $('.'+this.value).show();
        }
			}

			$(function(){
				$('#network').change(changeValSub);
			});
			
			$(function(){
				$('#security').change(changeValSub);
			});