JSFiddle - React, Tailwind, and code Playground

by elegantsolutions

HTML

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="checkbox-display.css">
</head>

<body>
	
	<form>
		<div class="segment">
			<label for="client-cat">Client category:</label>
			<div id="client-cat">
				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="a">
					<label>Category A</label>
				</div>
				
				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="b">
					<label>Category B</label>
				</div>

				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="c">
					<label>Category C</label>
				</div>

				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="d">
					<label>Category D</label>
				</div>

				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="e">
					<label>Category E</label>
				</div>

				<div>
					<input type="checkbox" tabindex="0" name="client-cat" value="f">
					<label>Category F</label>
				</div>
			</div>
		</div>

		<div class="segment">
			<div class="document-1">
				<label for="document-1">Upload a copy of Document 1:</label>
				<input type="file" id="document-1" name="1" accept=".pdf">
			</div>
		
			<div class="document-2">
				<label for="document-2">Upload a copy of Document 2:</label>
				<input type="file" id="document-2" name="2" accept=".pdf">
			</div>
		
			<div class="document-3">
				<label for="document-3">Upload a copy of Document 3:</label>
				<input type="file" id="document-3" name="3" accept=".pdf">
			</div>
		</div>
	
	</form>

<script
	src="http://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous">
</script>

</body>
</html>

CSS

.segment {
	margin-bottom: 2em;
}

JavaScript

var uploadReq = {
	a: [".document-2"],
	b: [".document-1", ".document-3"],
	c: [".document-1"],
	d: [".document-2", ".document-3"],
	e: [],
	f: [".document-3"]
};

$("#client-cat").change(function() {
	var arr = $("#client-cat input");
	var classes = [];
	
	for(i=0; i<arr.length; i++) {
		if(arr[i].checked) {
			var value = arr[i].value;
			var arr2 = uploadReq[value];
			$.extend(classes, arr2);
		}
	}

	console.log(classes);
});